CSS でコンテンツをコンテナの幅にオーバーフローさせるにはどうすればよいですか?

CSS のコンテナ幅を超えるコンテンツのオーバーフロー

レスポンシブ レイアウトのデザインでは、コンテナ DIV を使用して最大幅を確立し、適用するのが一般的です。大きな画面の場合は余白。ただし、コンテナーの指定された幅を超えてコンテンツを拡張する必要があるシナリオもあるでしょう。

課題:

提供された CSS コードは、コンテナーの最大幅を定義します。幅は 1280 ピクセルで、より大きな画面の中央に配置されます。ただし、ユーザーは、背景画像やカラー オーバーレイなどの特定の要素を画面の全幅に拡張したいと考えています。

解決策:

1 つの簡単な解決策コンテナ内に溢れたコンテンツを完全に閉じ込めないようにするためです。代わりに、全幅要素をコンテナの外側に配置し、目的の効果を達成するために必要なスタイルを適用します。

次の例を考えてみましょう。

<div>
<pre class="brush:php;toolbar:false">.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  /* background: orange; */
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

このシナリオでは、 .fullwidth div は画面の全幅に拡張しますが、内側の .container div は、全幅内にネストされている場合でも、中央の位置と限られた幅を維持します。部背景色は .fullwidth div に適用され、コンテナーの境界に関係なく画面全体を確実にカバーします。