浏览器 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 看起来就非常诡异。

相关推荐
街尾杂货店&15 小时前
css word属性
前端·css
Demoncode_y1 天前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
CoderYanger1 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
软件技术NINI1 天前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI1 天前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
金梦人生2 天前
Css性能优化
前端·css
写代码的皮筏艇2 天前
CSS属性继承与特殊值
前端·css
我有一棵树2 天前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
Light602 天前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
速易达网络2 天前
Vue3 原生移动应用开发来了
前端·javascript·css