有可能阻止这种情况吗？
是否可以在不禁用整个页面的水平滚动的情况下防止这种情况？除了改变我的css / markup以使元素100％的体宽，我无法想到任何东西。
测试版Chrome 43.0.2357.81 m& FF 36.0.1& Windows 8.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,.4);
height: 100px;
width: 5rem;
margin-bottom: 25px;
}
.Box {
position: absolute;
top: 0;
left: 0;
background: rgba(0,.4);
height: 50px;
width: 100vw;
}
.tall {
height: 100rem;
}
解决方法
TL;博士
如果您需要一个元素为可见视口的100％宽度(视口减去滚动条)，则需要将其设置为正文的100％。如果有垂直滚动条，则无法使用vw单位执行此操作。
1.将所有祖先元素设置为静态位置
如果确保所有.Box的祖先都设置为position：static;然后将.Box设置为width：100％;所以它将是身体宽度的100％。但这并不总是可行的。有时你需要一个祖先的位置：绝对;或者位置：亲属;
2.将元素移到非静态祖先之外
如果你不能将祖先元素设置为position：static;你需要在他们之外移动.Box。这将允许您将元素设置为体宽的100％。
3.删除垂直滚动条
如果您不需要垂直滚动，可以通过设置< html>来删除垂直滚动条。要溢出的元素-y：hidden;。
设置< html>溢出的元素-y：滚动; overflow-x：hidden;将阻止水平滚动条出现，但100vw元素仍将溢出。
Vieport-Percentage长度规格
@H_404_57@The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed,they are scaled accordingly. However,
when the value of overflow on the root element is auto,any scroll
bars are assumed not to exist. Note that the initial containing
block’s size is affected by the presence of scrollbars on the
viewport.
似乎存在一个错误，因为当根元素上的溢出设置为auto时，vw单元应仅包含滚动条宽度。但我已经尝试将root元素设置为overflow：scroll;它并没有改变。
