防止100vw创建水平滚动_随笔

防止100vw创建水平滚动

基本上答案是“否”，如果您有垂直滚动条，则无法使100vw等于可见视口的宽度。这是我为该问题找到的解决方案。

警告： 我尚未测试这些解决方案的浏览器支持

tl; dr

如果需要将元素的宽度设置为可见视口（视口减去滚动条）的100％，则需要将其设置为主体的100％。如果有垂直滚动条，则无法使用大众单位进行 *** 作。

1.将所有祖先元素设置为静态

如果您确定所有

.box

的祖先都设为，

position: static;

则将其设为

.box

，

width:100%;

因此它将是人体宽度的100％。但是，这并不总是可能的。有时您需要其中一位祖先为

position: absolute;

或

position:relative;

。

例

2.将元素移到非静态祖先之外

如果您无法将祖先元素设置为

position: static;

，则需要将其移出

.box

它们。这将允许您将元素设置为主体宽度的100％。

例

3.卸下垂直滚动条

如果您不需要垂直滚动，只需将

<html>

元素设置为即可删除垂直滚动条

overflow-y: hidden;

。

例

4.卸下水平滚动条 这不能解决问题，但可能适合某些情况。

将

<html>

元素设置为

overflow-y: scroll; overflow-x:hidden;

可以防止水平滚动条出现，但是100vw元素仍然会溢出。

例

视口百分比长度规格

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。但是，当根元素上的溢出值为auto时，则假定不存在任何滚动条。请注意，初始包含块的大小受视口上滚动条的影响。

似乎存在错误，因为当在根元素上将溢出设置为自动时，大众设备仅应包括滚动条宽度。但是我尝试将根元素设置为，

overflow:scroll;

并且它没有改变。

欢迎分享，转载请注明来源：内存溢出

防止100vw创建水平滚动