Div の高さを本体の 100% から固定高さのヘッダーとフッターを差し引いた値に設定するにはどうすればよいですか?

Div の高さを本文から固定高さのヘッダーとフッターを引いた 100% に設定

コンテンツの div を設定したい場合固定高さのヘッダー要素とフッター要素を除いて、本体の高さの 100% を占めるには、CSS を使用するのが理想的なソリューションです。以下は、複数のブラウザで機能する完全なテクニックです:

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

p {
  margin: 0;
  padding: 0 0 1em 0;
}</code>

このアプローチの重要な要素を詳しく見てみましょう:

• 絶対位置: #wrapper div絶対的な位置に配置され、高さいっぱいまで伸ばすことができます。 viewport.
• Negative Margins: ヘッダー要素とフッター要素は、負のマージンを使用して #wrapper をオーバーラップします。これにより、#content div に必要なスペースを与えながら、それらが固定されているような錯覚が生まれます。
• 最小高さ: #wrapper と #content div の両方の最小高さが 100% に設定されています。これにより、ヘッダーとフッターによって占められていない残りのスペースが確実に埋められます。

この手法は、コンテンツ div を本体の高さから固定値を引いた 100% に確実に設定するクロスブラウザー ソリューションを提供します。高さのヘッダー要素とフッター要素。

以上がDiv の高さを本体の 100% から固定高さのヘッダーとフッターを差し引いた値に設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。