您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

vw为什么将滚动条包含在视口中?

vw为什么将滚动条包含在视口中?

如果视口单位不 包括 原因滚动条,但毕竟是显示尺寸(屏幕),这将很方便。不过,请使用伪元素查看此解决方案:

在您的示例中也使一个正方形:

.@R_378_2419@ {
    float: left;
    width: 50%;
}

.@R_378_2419@::before {
    content: "";
    display: block;
    padding-top: 100%;
}

编辑-如果有人想知道这为什么起作用(垂直填充响应原始元素的宽度)…基本上就是在规范中对其进行定义的方式:

即使对于“ padding-top”和“ padding-bottom”,该百分比也是相对于所生成的框的包含块的宽度计算的。

遇到我自己的答案后,我认为它需要一些改进。语义上的歧义是为什么我在顶部用“ cause”代替“ include”一词。因为更多的事实是vw单位仅考虑了视口的大小- 包括任何滚动条并在其宽度加到其他方向时 _导致_溢出和在另一个方向上的滚动条100vw(使得视口所需的总空间加上滚动条的宽度超过屏幕)。

就像这里的问题一样,处理vw单元的最佳方法是尽可能避免使用它们,因为它们与桌面浏览器(没有覆盖的滚动条)不太兼容。

我编辑了包含CSS变量的想法,但是看起来还是很希望。

其他 2022/1/1 18:24:01 有342人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶