コンテンツに合わせて DIV の高さを拡張する方法

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

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

.clear {
  clear: both;
}

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

より最新の代替案は、柔軟で応答性の高いレイアウトを可能にする CSS3 レイアウト モードである Flexbox を利用することです。このアプローチでは、次の 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;
}

Flexbox を使用した HTML 構造:

  

     Header   
    
  

    Content
  

上記の Flexbox アプローチにより、コンテンツ セクションが内部要素の高さに合わせて垂直方向の利用可能なスペースを埋めるように自動的に拡張されるレスポンシブ レイアウトが作成されます。