ヘッダーとフッターの後の残りのボディの高さを埋める動的コンテンツ Div を作成するにはどうすればよいですか?

動的コンテンツ Div がヘッダーとフッターの残りのボディの高さを埋めるようにします

固定高さのヘッダーとフッターの後の残りのボディの高さにまたがるコンテンツ div を実現します。 CSS の一般的な課題です。次の包括的な解決策は、最新のブラウザーと Internet Explorer 8 にわたるこの問題に対処します。

この例では、コンテンツを「#wrapper」 div 内でラップし、絶対的に配置され、ビューポート全体に広がります。 "min-height" プロパティを 100% に設定して、少なくともその高さを占めるようにし、ヘッダーとフッターを考慮してパディングを追加します。

コンテンツを "#content" div 内にネストします。 "min-height" を 100% に設定すると、残りの高さが占有されます。ヘッダーとフッターに固定の高さを与え、そのマージンをマイナスに調整して、「#wrapper」 div のパディングを補正します。

<code class="css">html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}</code>

このソリューションは、ビューポート サイズに基づいてコンテンツ div の高さを動的に調整します。ヘッダーとフッターを収容しながら、残りの本文スペースをシームレスに埋めます。

以上がヘッダーとフッターの後の残りのボディの高さを埋める動的コンテンツ Div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。