【发布时间】：2017-09-04 16:12:01
【问题描述】：
我正在尝试构建一个网站模板，其中主要的#content div 占屏幕宽度的 75%，并以页面为中心，但我偶尔也希望有跨越视口整个宽度的部分。我完成此操作的方法是在这些部分应用 .full-width 类，通过将宽度设置为 100vw 以及您可以在下面的 CSS 中看到的一些其他属性来覆盖 #content div 的边距.
问题是，当页面上有足够的内容出现垂直滚动条时，滚动条的宽度会包含在视口宽度的计算中，因此内容会隐藏在滚动条后面。
有没有办法解决这个问题，或者有一个完全不同的更好的方法来完成我想要完成的事情？
#content {
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
box-sizing: border-box;
}
.full-width img {
width: 100%;
}<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla
dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit
lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<!-- content -->【问题讨论】：
-
我实际上会以相反的方式构造它 - 默认为 100% 宽度，并在任何应为 75% 的内容周围添加一个“容器”div。它是构建它的标准方法，而不是添加元素以扩展其容器之外，并且不会试图允许滚动条等
-
我确实考虑过这一点，但对绝大多数内容应用如此多的标记似乎是一种不好的做法。
-
老实说，我不认为这比强迫元素做他们不应该做的事情更糟糕，方法是让它们延伸到容器之外，然后不得不在 CSS 中进行计算（或者更糟， JS) 来抵消负面影响 :) 我理解不愿意添加更多标记，但大概容器必须在 75% 和全宽之间交替，所以我看不出你会有比其他？此外，将相关内容包装在容器中仍然有些结构化，因此您不会引入仅样式标记。
标签： html css scrollbar css-position viewport