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

CSS 包含における全幅オーバーフロー

Web デザインでは、レスポンシブ レイアウト用のコンテナーを備えた CSS グリッド システムを使用するのが一般的です。ただし、特定のシナリオでは、要素がコンテナーの幅を超えて拡張する必要があります。この質問では、この「オーバーフロー」動作を実現する方法について説明します。

問題の説明

開発者は、コンテナ div がコンテンツの幅を制限し、背景が表示されないという問題に遭遇しました。または色が全画面に拡張されないようにします。彼らは、この制限を克服する方法についてのガイダンスを求めています。

解決策

最も簡単な解決策は、コンテナの閉じ込めから抜け出すことです。これは次の方法で実行できます。

• 既存のコンテナの外に新しい div を作成する
• この新しい div にオーバーフロー要素の背景または色を適用する

こうすることで、制限されたコンテンツはコンテナの境界内に留まりながら、全幅要素はコンテナの境界を越えて拡張できます。 container.

例

次の CSS および HTML コードを考えてみましょう:

* {
  box-sizing: border-box;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

この例では、全角 div がブレイクアウトされます。コンテナの制限を解除し、オレンジ色の背景を画面全体に拡張します。内側のコンテナとその内容物は、それぞれの範囲内に残ります。

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