防止100VW创建水平滚动

Question

如果将元素设置为width：100vw；并且存在垂直滚动条，则元素的宽度将等于视口加上滚动条的宽度。

有没有可能防止这种情况发生？

有没有可能在不禁用整个页面的水平滚动的情况下防止这种情况发生？除了改变我的CSS/标记，使元素100%的身体宽度，我什么也想不出来。

在Windows 8.1上的Chrome版本43.0.2357.81m&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;
}

Answer 1

基本上答案是否定的，如果你有一个垂直滚动条，就没有办法使100VW等于可见视口的宽度。以下是我为这个问题找到的解决方案。

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

DR

如果您需要一个元素是可见视区的100%宽度（视区减去滚动条），您需要将其设置为主体的100%。如果有一个垂直滚动条，你就不能用大众的单位来做。

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

如果确保.box的所有祖先都设置为position：static；，则将.box设置为width：100%；，这样它将是主体宽度的100%。但这并不总是可能的。有时您需要其中一个祖先是位置：绝对；或位置：相对；。

示例

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

如果不能将祖先元素设置为position：static；，则需要将.box移到它们之外。这将允许您将元素设置为主体宽度的100%。

示例

3.删除垂直滚动条

如果不需要垂直滚动，只需将元素设置为overflow-y：hidden；即可删除垂直滚动条。

示例

4.移除水平滚动条这并不能修复问题，但可能适用于某些情况。

将元素设置为overflow-y：scroll；overflow-x：hidden；将防止水平滚动条出现，但100vw元素仍然会溢出。

示例

viewport-百分比长度规范

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度改变时，它们会相应地缩放。但是，当根元素上的overflow值为auto时，任何滚动条都假定不存在。请注意，初始包含块的大小受视口上滚动条的存在影响。

当根元素上的overflow设置为auto时，vw单元应该只包括滚动条宽度，这似乎存在一个bug。但我尝试将根元素设置为overflow：scroll；，但它没有改变。

示例