防止100vw创建水平滚动

一尘不染

防止100vw创建水平滚动

css

如果将元素设置为，width: 100vw;并且有一个垂直滚动条，则该元素的宽度将等于视口加上滚动条的宽度。

有可能防止这种情况吗？

是否可以在不禁用整个页面水平滚动的情况下防止这种情况？除了更改css / markup以使元素占主体宽度的100％之外，我什么都没想到。

已在Windows 8.1的Chrome版本43.0.2357.81 m和FF 36.0.1和Opera 20.0.1387.91中进行测试

这是要求的代码：

例

html

<div class="parent">
    <div class="box"></div>
</div>
<div class="tall"></div>

CSS

body { margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after {
    box-sizing: inherit;
    position: relative;
}
.parent {
    background: rgba(0, 0, 0, .4);
    height: 100px;
    width: 5rem;
    margin-bottom: 25px;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    height: 50px;
    width: 100vw;
}

.tall {
    height: 100rem;
}

阅读 810

2020-05-16

共1个答案

一尘不染

基本上答案是“否”，如果您有垂直滚动条，则无法使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;并且它没有改变。

2020-05-16