CSS でコンテンツのオーバーフローを制限 Div にする方法は?

制限 Div からのコンテンツのオーバーフロー

CSS では、div 要素は通常、コンテナとして機能し、特定の幅とマージンを定義します。ただし、コンテンツが div の境界を超えてオーバーフローし、画面の幅全体に広がることを許可したい場合があります。これを実現する方法は次のとおりです。

コンテナをバイパスする

最も簡単な解決策は、コンテナの制限を削除することです。すべてのコンテンツを div 内に保持する代わりに、全幅要素用に新しい div を作成します。これにより、背景画像または背景色が元のコンテナの制限を超えて拡張できるようになります。

次の例では、「コンテナ」の外側に「全幅」の div を作成します:

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

HTML:

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

全幅 div からコンテナを削除することで、その背景がその幅全体に広がるようになります。 screen.

コンテナの幅を超えています

もう 1 つの方法は、calc() 関数を使用して要素の幅を動的に調整することです。これは、親コンテナまたは全幅要素自体に適用できます。

たとえば、「コンテナ」 div を変更して、最大幅を超えて拡張できます:

.container {
  width: calc(100% + 60px);
  max-width: 1280px;
}

この場合、コンテナの幅が最大幅を超えることになり、オーバーフローしたコンテンツが元の境界を超えて広がることが可能になります。

以上がCSS でコンテンツのオーバーフローを制限 Div にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。