防止100vw创建水平滚动
如果将元素设置为，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;
}
问题答案：
基本上答案是“否”，如果您有垂直滚动条，则无法使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;并且它没有改变。
-
如果将元素设置为并且存在垂直滚动条，则元素的宽度将等于视口加上滚动条的宽度。 有没有可能防止这种情况发生？ 有没有可能在不禁用整个页面的水平滚动的情况下防止这种情况发生？除了改变我的CSS/标记，使元素100%的身体宽度，我什么也想不出来。 在Windows 8.1上的Chrome版本43.0.2357.81m&FF 36.0.1和Opera 20.0.1387.91中进行了测试 下面是要求的代码
-
问题内容： 我正在尝试创建一系列只能水平滚动的照片。 它应该看起来像这样的 但是，只有通过指定包含照片的的宽度，才能实现上述目的（因此它们不会“自动换行”）。如果我不放宽- 看起来像这样； 使用CSS可以防止固定宽度的图像发生变化，该怎么办。 谢谢 问题答案： 您可以使用与。这样写：
-
在我的HTML页面中，我有很多宽度：100VW的东西占据了整个页面。有一个垂直滚动条，它导致一个水平滚动条（因为垂直滚动条占用了20像素）。 这导致的更大问题是我的东西似乎偏离了中心。虽然只是轻微的，但一旦你注意到它（这需要大约3秒的凝视），它不会消失，而且是非常令人沮丧的。我贴了一张超级小浏览器窗口的截图。我还把代码贴出来了。 图像 null null 文字偏离了中心。我怎么解决这个？
-
我正在尝试构建一个网站模板，其中的主要#Content div是屏幕宽度的75%，并以页面为中心，但我也希望偶尔有跨越整个视口宽度的部分。我实现这一点的方法是在这些部分上应用一个.full-width类，通过将width设置为100vw来覆盖#content div的边距，以及您可以在下面的CSS中看到的一些其他属性。 问题是，当页面上有足够多的内容时，垂直滚动条就会出现，滚动条的宽度就会包含在视
-
问题内容： 我想在水平滚动的div中显示许多记录。我正在使用Twitter Bootstrap，并设置了一个div行，每个数据记录均表示为一列。 如果我需要为此部分转储Bootstrap网格，那很好，我怀疑它不是按照设计的方式真正使用它…如果我不打算将Twitter Bootstrap用于此部分，那么我的问题几乎与[防止浮动div换行。该问题的可接受答案的问题在于，它假定您可以计算容器的总宽度。在
-
请看http://codepen.io/anon/pen/zGLZoR 我的“浮动div”跟随页面滚动-它在向下移动滚动条后立即执行此操作。如何仅在达到px（比如200px）滚动高度时启动浮动。因此，当您向下滚动200px时，可以看到浮动div，而不是直接看到。 编辑： 当滚动回到顶部时，div必须返回到原始位置-超过200px标记