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

CSS でコンテナの幅を超えてコンテンツを拡張する

レスポンシブ グリッドを使用する場合、多くの場合、特定の幅に拡張する格納 div が必要になります。ただし、特定の状況では、コンテナの幅を超えてコンテンツをオーバーフローさせたい場合があります。

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

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding: 0 30px;
  width: 100%;
}

このコンテナは最大幅 1280 ピクセルに拡張され、追加されます。左側と右側にパディングします。デフォルトでは、このコンテナ内のコンテンツは定義された幅内で折り返されます。

コンテンツがコンテナの幅を超えてオーバーフローできるようにするには、2 つのオプションがあります:

1。追加の Div を使用する

最も簡単な解決策は、最初のコンテナを閉じて、画面の幅全体に広がる新しい div を開くことです。次に、この全角 div に希望の背景色または画像を適用できます。

2.コンテナを削除します

場合によっては、コンテナを含む div がまったく必要ない場合があります。コンテナを削除して、全幅の div が利用可能なスペースを埋めるだけです。この方法は、幅の外側にコンテンツを追加せずに全幅の背景を実現する必要がある場合にのみ有効です。

コード例:

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Content</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

これらのアプローチを理解することで、必要に応じてコンテナの幅を超えて溢れるコンテンツに対応できるレスポンシブ デザインを作成できます。

以上がCSS でコンテナの幅を超えてコンテンツをオーバーフローさせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。