防止 100vw 创建水平滚动 [英] Prevent 100vw from creating horizontal scroll
问题描述
如果一个元素设置为 width: 100vw; 并且有一个垂直滚动条，则元素的宽度将等于视口加上滚动条的宽度.
是否可以防止这种情况发生?
是否可以在不禁用整个页面上的水平滚动的情况下防止这种情况发生?除了更改我的 css/markup 使元素达到主体宽度的 100% 之外，我想不出任何事情.
在 Chrome 版本 43.0.2357.81 中测试 &FF 36.0.1 &Windows 8.1 上的 Opera 20.0.1387.91
这是要求的代码:
html
<div class="box"></div><div class="tall"></div>
css
body { margin: 0;}html { box-sizing: border-box;}*, *::before, *::after {box-sizing:继承；位置:相对；}.父母{背景:rgba(0, 0, 0, .4);高度:100px；宽度:5rem；底边距:25px；}.盒子 {位置:绝对；顶部:0；左:0；背景:rgba(0, 0, 0, .4);高度:50px；宽度:100vw；}.高 {高度:100rem；}基本上答案是否定的，如果您有垂直滚动条，则无法使 100vw 等于可见视口的宽度.以下是我针对此问题找到的解决方案.
警告:我尚未测试这些解决方案是否支持浏览器
<小时>tl;dr
如果您需要一个元素为可见视口的 100% 宽度(视口减去滚动条)，您需要将其设置为正文的 100%.如果有垂直滚动条，你就不能用 vw 单位做到这一点.
<小时>1.将所有祖先元素设置为静态定位
如果您确保所有 .box 的祖先都设置为 position: static; 然后将 .box 设置为 width: 100%; 所以它将是主体宽度的 100%.但这并不总是可能的.有时你需要一个祖先是 position: absolute; 或 position:relative;.
2.将元素移到非静态祖先之外
如果您不能将祖先元素设置为 position: static;，您需要将 .box 移到它们之外.这将允许您将元素设置为主体宽度的 100%.
3.删除垂直滚动条
如果您不需要垂直滚动，您可以通过将 <html> 元素设置为 overflow-y: hidden; 来删除垂直滚动条.>
4.删除水平滚动条这不能解决问题，但可能适用于某些情况.
将 元素设置为 overflow-y: scroll;overflow-x: hidden; 会阻止水平滚动条出现，但是100vw元素还是会溢出.
视口百分比长度规范
<块引用>视口百分比长度是相对于初始包含块.当初始高度或宽度包含块被更改，它们相应地被缩放.然而，当根元素上的溢出值为 auto 时，任何滚动假定条形图不存在.请注意，初始包含块的大小受滚动条的影响视口.
似乎存在一个错误，因为当根元素上的溢出设置为 auto 时， vw 单位应仅包含滚动条宽度.但我已经尝试将根元素设置为 overflow: scroll; 并且它没有改变.
If an element is set to width: 100vw; and there is a vertical scrollbar the width of the element will be equal to the viewport plus the width of the scrollbar.
Is it possible to prevent this?
Is it possible to prevent this without disabling horizontal scrolling on the entire page? Aside from changing my css/markup to make the element 100% of the body width I can't think of anything.
Tested in Chrome Version 43.0.2357.81 m & FF 36.0.1 & Opera 20.0.1387.91 on Windows 8.1
Here is the code as requested:
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;
}
Basically the answer is no, if you have a vertical scrollbar there is no way to make 100vw equal the width of the visible viewport. Here are the solutions that I have found for this issue.
warning: I have not tested these solutions for browser support
tl;dr
If you need an element to be 100% width of the visible viewport(viewport minus scrollbar) you will need to set it to 100% of the body. You can't do it with vw units if there is a vertical scrollbar.
1. Set all ancestor elements to position static
If you make sure that all of .box's ancestors are set to position: static; then set .box to width: 100%; so it will be 100% of the body's width. This is not always possible though. Sometimes you need one of the ancestors to be position: absolute; or position: relative;.
2. Move the element outside of non-static ancestors
If you can't set the ancestor elements to position: static; you will need to move .box outside of them. This will allow you to set the element to 100% of the body width.
3. Remove Vertical Scrollbar
If you don't need vertical scrolling you can just remove the vertical scrollbar by setting the <html> element to overflow-y: hidden;.
4. Remove Horizontal Scrollbar This does not fix the problem, but may be suitable for some situations.
Setting the <html> element to overflow-y: scroll; overflow-x: hidden; will prevent the horizontal scrollbar from appearing, but the 100vw element will still overflow.
Viewport-Percentage Lengths Spec
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.
It appears that there is a bug because vw units should only include the scrollbar width when overflow is set to auto on the root element. But I've tried setting the root element to overflow: scroll; and it did not change.
这篇关于防止 100vw 创建水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
