如果元素设置为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;
}
Hal*_*ton 28
基本上答案是否定的,如果你有一个垂直滚动条,就无法使100vw等于可见视口的宽度.以下是我为此问题找到的解决方案.
警告: 我没有针对浏览器支持测试这些解决方案
TL;博士
如果您需要一个元素为可见视口的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.删除水平滚动条 这不能解决问题,但可能适用于某些情况.
将<html>元素设置为overflow-y: scroll; overflow-x: hidden;将阻止水平滚动条出现,但100vw元素仍将溢出.
视口 - 百分比长度规格
视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.但是,当根元素上的溢出值为auto时,假定不存在任何滚动条.请注意,初始包含块的大小受视口上滚动条的存在的影响.
似乎存在一个错误,因为当根元素上的溢出设置为auto时,vw单元应仅包含滚动条宽度.但我已经尝试将根元素设置为overflow: scroll;并且它没有改变.
小智 9
使用max-width属性 withwidth:100vw它解决了我的问题。
这是我用过的。
.full{
height: 100vh;
width: 100vw;
max-width: 100%;
}
基本上它的作用是固定视口的最大宽度，从而消除水平滚动。
更多 @ https://www.w3schools.com/cssref/pr_dim_max-width.asp
max-width 属性定义元素的最大宽度。
如果内容大于最大宽度，则会自动改变元素的高度。
如果内容小于最大宽度，则 max-width 属性不起作用。
我知道这是一个老问题,但这个bug仍然存在于现代浏览器中.我不喜欢这样做的想法overflow-x: hidden这就是我所做的.这里有一个完整的例子:http://codepen.io/bassplayer7/pen/egZKpm
我的方法是确定滚动条的宽度,并用于calc()减少100vw滚动条的数量.这有点复杂,因为在我的情况下,我从一个已经定义的框中拉出内容的宽度,所以我也需要声明边距.
关于下面代码的一些注意事项:首先,我注意到20px似乎是滚动条的相当宽的幻数.我使用SCSS变量(它不一定是SCSS)和外部代码@supports作为后备.
此外,这并不能保证永远不会有滚动条.由于它需要Javascript,因此没有启用该功能的用户将看到水平滚动条.您可以通过设置overflow-x: hidden然后添加一个类来解决它,以便在Javascript运行时覆盖它.
完整代码:
$scroll-bar: 20px;
:root {
--scroll-bar: 8px;
}
.screen-width {
width: 100vw;
margin: 0 calc(-50vw + 50%);
.has-scrollbar & {
width: calc(100vw - #{$scroll-bar});
margin: 0 calc(-50vw + 50% + #{$scroll-bar / 2});
}
@supports (color: var(--scroll-bar)) {
.has-scrollbar & {
width: calc(100vw - var(--scroll-bar));
margin: 0 calc(-50vw + 50% + (var(--scroll-bar) / 2));
}
}
}
然后这个Javascript将设置CSS自定义属性:
function handleWindow() {
var body = document.querySelector('body');
if (window.innerWidth > body.clientWidth + 5) {
body.classList.add('has-scrollbar');
body.setAttribute('style', '--scroll-bar: ' + (window.innerWidth - body.clientWidth) + 'px');
} else {
body.classList.remove('has-scrollbar');
}
}
handleWindow();
作为旁注,Mac用户可以通过转到系统偏好设置 - >常规 - >显示滚动条=始终进行测试