Question

包含宽度div的某些时候需要将元素背景设置为全宽，所以我将它设置为一个伪元素，但是descktop浏览器，当页面很长时，高度为垂直scrooll bar添加16px到视口，所以我计算它通过计算（见下文）。

HTML：

<div class="wrapped">
 <h1>100vw background in wrapped</h1>
 <div class="fullbg">
  some body text, images, etc here
 </div>
</div>

CSS

html, body {    margin: 0;      padding: 0;    }
body {     height: 100%;     width: 100%;    }
div {      position: relative;   }
*,*:before,*:after {      box-sizing: border-box;
 -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;
}

.wrapped {
 width: 70%;
 margin: 0 auto;
 height: 150vh; /* simulate long heigh */
}
.fullbg {
 height: 5em;
/* some styles here*/
}

.fullbg:before {
 content: "";
 bottom: 0;
 display: block;
 background: rgba(85, 144, 169, 0.7);
 position: absolute;
 width: 100vw;
 right: 50%;
 margin-right: -50vw;                /* work for short page or mobile browser*/
 margin-right: calc( -50vw + 8px );  /* work for desctop long page  */ 
 top: 0;
 z-index: -1;
}

我在

看了回答

和其他问题，但是没有为这个

找到真正的通用css解决方案

作为临时解决方案可能是js，如this：

var scrollbarWidth = ($(document).width() - window.innerWidth);

但我认为这不是最好的解决方案，现在我不知道如何使用伪考虑到滚动宽度可能会有所不同。

PS。没有人溢出：隐藏！

Answer 1

滚动条可以专门定位。

在Chrome和safari

中查看此修复程序

http://codepen.io/anon/pen/dXgmbZ

关键CSS：

.element::-webkit-scrollbar { 
width: 0 !important;
}`

codepen只是你修复chrome的例子。如果您希望看到更强大的解决方案，请查看此JSFiddle：
http://jsfiddle.net/E78q3/

这背后的想法是用absolute定位并隐藏容器/包装overflow来剪切滚动条。简单，聪明，但有效。

进一步阅读：
https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/

防止100vw在伪

1 个答案: