防止100vw创建水平滚动 [英] Prevent 100vw from creating horizontal scroll
问题描述
如果元素设置为 width：100vw; ，并且有一个垂直滚动条，该元素的宽度将等于视口加上滚动条的宽度。
是否可以防止这种情况？
页？
在Chrome版本43.0.2357.81中测试，除了更改我的css /标记以使元素为body宽度的100％ 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，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％的主体。如果有垂直滚动条，则无法使用vw单位。
1 。将所有祖代元素设置为静态
如果您确保 .box 祖先设置为 position：static; 然后设置 .box 到 width：100％ 所以它将是身体的宽度的100％。这不总是可能的。有时你需要一个祖先 position：absolute; 或 position：relative; 。
2。将元素移到非静态祖先之外
如果您无法将祖先元素设置为 position：static; code>你需要移动 .box 。这将允许您将元素设置为body宽度的100％。
3。删除垂直滚动条
如果您不需要垂直滚动，可以通过设置< html& 元素到 overflow-y：hidden; 。
4。删除水平滚动条
这不能解决问题，但可能适用于某些情况。
< html> 元素到 overflow-y：scroll; overflow-x：hidden; 将阻止水平滚动条出现，但是100vw元素仍会溢出。
Vieport-百分比长度规格
视口百分比长度是相对于
初始包含块的大小。当包含块的初始
的高度或宽度改变时，它们被相应地缩放。但是，当根元素上的overflow的值是auto时，
，任何scroll
bars被假定为不存在。注意，包含
块大小的初始化会受到
视口上滚动条的存在的影响。
似乎有一个错误，因为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.
Vieport-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屋！
