1
我想建立一个网站模板，主#content div是75％的屏幕宽度，并居中在页面上，但我也想偶尔有跨越视口的整个宽度的部分。我已经完成的方式是在这些覆盖#content div边距的部分上应用一个.full-width类，方法是将宽度设置为100vw，以及一些其他属性，您可以在下面的CSS中看到。使用100vw导致垂直滚动条时水平裁剪
问题是，当垂直滚动条出现在页面上的内容足够多时，滚动条的宽度将包含在视口宽度的计算中，因此内容将隐藏在滚动条的后面。
有没有解决这个问题的方法，或者是一种完全不同的更好的方法来完成我想要完成的任务？
#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％的宽度，并添加周围应该成为任何内容的“容器” DIV 75％。它是构建它的标准方式，而不是添加元素来扩展它们的容器，并且不会尝试允许滚动条等。 – FluffyKitten
我真的想过，但是对绝大多数应用如此多的标记似乎是不好的做法的内容。 –
老实说，我认为它不比强迫元素做一些他们不应该做的事情，因为它们不会让它们扩展到它们的容器之外，然后必须在CSS（或更糟糕的JS）中进行计算来抵消负面影响:)我明白不愿意添加更多标记，但大概容器将不得不在75％和全部宽度之间交替，所以我看不到另一个比另一个更多。将相关内容封装在容器中仍然有点结构化，因此您不会引入仅用于样式的标记。 – FluffyKitten