浏览器 vw 单位与滚动条

浏览器视口

简单理解就是浏览器中用于浏览内容的区域,浏览器界面什么页签、菜单、开发者工具都去掉的部分,如下:

在 css 当中,浏览器的视口尺寸可以通过 100vw 与 100vh 来获取。在不出现右侧滚动条的情况下,给一个元素设置 width: 100vw ,它就会铺满整个浏览器窗口内容。例如图中的 div

100vw 下的滚动条问题

当浏览器视口高度不足以完整显示 div ,出现右侧滚动条时,底部滚动条也会一同出现。这是因为 div 宽度 100vw 在浏览器尺寸和缩放不变化的情况下是个固定值,而页面右侧滚动条的出现使得 div 实际能够显示的区域小于 100vw ,导致底部的滚动条

而如果将 div 宽度 100vw 变成 100% ,底部滚动条就会消失(父元素 body 默认会占满整个视口,但是出右侧滚动条时,就会让出滚动条的空间)。如果没有右侧滚动条,给 div 设置 100% 和 100vw 的效果是一样的。

在出现右侧滚动条时,如果设置 div 宽度为 width: calc(100vw - 100%) ,我们就能拿到一个和当前右侧滚动条宽度一致的 div

如何使用 100vw 并且规避滚动条问题

一般用到 100vw 的时候都是想元素自动撑满浏览器视口。虽然 100% 能比较好得解决滚动条,但是当出现深层嵌套的时候,我们就要把元素的父元素挨个设置成 100% ,可以但不算体面。而解决这个问题的办法呢,也没有太好,就利用 calc 计算 width: calc(100vw - 滚动条宽度值)

有些方法诸如设置 max-width: 100% 来限制元素宽度,或者 calc(100vw - 100%) 获取滚动条宽度再计算,这种方式能起效的前提是父元素已经能够撑满整个视口,那既然如此,何不直接设置 width: 100%

视口尺寸的补充

100vw 的值等于 window.innerWidth ;同理,100vh 等于 window.innerHeight 。如果去缩放内容,innerWidth 的值也会等比例变化,但是用于标定浏览器宽高的值 window.outerWidthwindow.outerHeight 就不会随着缩放变化。

而非常有意思的是,在 win11 1080P Chrome100% 比例下:

  • 浏览器未占满屏幕,outerWidth - innerWidth = 16
  • 浏览器占满屏幕, outerWidth = innerWidth = 1920
  • 浏览器 F11 全屏,outerWidth - innerWidth = -16

这个多出来的正负 16 是浏览器的哪部分?猜测是浏览器边框的阴影效果的宽度,但是这个 -16 看起来就非常诡异。

相关推荐
Hilaku9 分钟前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
每天开心2 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢3 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister3 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
MiyueFE3 小时前
CSS 函数与混入草案:原生 CSS 的“魔法”即将登场!
前端·css
呆呆的心6 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
爱学习的小学渣7 小时前
Css: flex布局+趣味Demo
css
wuxuanok7 小时前
Web前端开发-HTML、CSS
前端·css·html
lichenyang4539 小时前
css模块化以及rem布局
前端·javascript·css
棉花糖超人10 小时前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html