1
メインの#content divが画面の幅の75％で、ページの中央に位置するウェブサイトテンプレートを作成しようとしていますが、ビューポートの全幅にまたがるセクション。私がこれを達成した方法は、幅を100vwに設定して#content divの余白をオーバーライドするこれらのセクションに.full-widthのクラスを適用することと、下の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