DIV の高さをコンテンツに合わせて拡張するにはどうすればよいですか?

内容に合わせて DIV の高さを拡張する方法

この質問は、内部の DIV に合わせて DIV の高さを拡張することに関するものです。コンテナ DIV の構造を維持します。この望ましい動作を実現するには、CSS レイアウトへの変更を実装することが不可欠です。

1 つのアプローチには、「clear: Both;」を追加することが含まれます。 #main_content DIV を閉じる前にプロパティを編集してください。この CSS ルールは、#main_content がコンテナ DIV 内で使用可能な幅全体を持つことを保証するために、先行するフローティング要素を無視するようにブラウザに指示します。さらに、
を移動することもできます。要素を #main_content DIV に追加し、その CSS を次のように設定します。

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

Flexbox を使用した代替ソリューション

より現代的な代替案は、CSS3 レイアウトである Flexbox を利用することです。柔軟で応答性の高いレイアウトを可能にするモード。このアプローチでは、次の CSS ルールを適用できます:

<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>

Flexbox を使用した HTML 構造:

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

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

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

上記の Flexbox アプローチでは、コンテンツ セクションが自動的に展開される応答性の高いレイアウトが作成されます。内部要素の高さに合わせて、利用可能な垂直方向のスペースを埋めます。

以上がDIV の高さをコンテンツに合わせて拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。