ネストされた DIV コンテナをその子を収容できるように拡張するにはどうすればよいですか?

ページ コンテンツの調整のためのネストされた DIV の高さの拡張

ネストされた DIV 構造を使用する場合、一般的に、次のことを確実にするという課題に遭遇します。メイン コンテナは、子 DIV に合わせて動的にサイズ変更されます。この特定のシナリオでは、目的は、#main_content DIV の高さを必要に応じて拡張して、その中に項目を格納することです。

この問題に対処するには、#main_content を閉じる前にクリアフィックスを強制的に適用することが効果的な解決策の 1 つです。 DIV.これには、
を移動する必要があります。

<code class="css">.clear {
  clear: both;
}</code>

Flexbox を使用した最新のアプローチ

より現代的なソリューションとして、CSS3 の新しいレイアウト方法である Flexbox の採用を検討してください。この手法により、カスタマイズ可能なサイズと自動サイズ変更を使用して要素を列または行に配置する柔軟なボックス レイアウトが可能になります。

フレックスボックスを実装するには、親コンテナをフレックス コンテナとして定義し、そのフレックス方向を柱状に設定します。これにより、子要素が確実に垂直方向にスタックされます。次に、flex プロパティをプライマリ コンテンツ セクションに割り当て、利用可能なスペースを占有するために展開する必要があることを示します。

<code class="css">body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}</code>

<code class="html"><div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div></code>

これらの手法を組み込むことで、#main_content が必要な動作を効果的に実現できます。 DIV またはそれに相当する最新の Flexbox は、すべての子 DIV を含むように動的にサイズ変更され、視覚的に魅力的で応答性の高いデザインを提供します。

以上がネストされた DIV コンテナをその子を収容できるように拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。