コンテンツ Div を固定ヘッダーとフッターを除いて本体の高さの 100% に埋めるにはどうすればよいですか?

固定高さのヘッダーとフッターを除き、本体の高さの 100% を占めるコンテンツ Div を設定する方法

CSS を使用すると、正確な定義が可能になりますウェブページ用の多彩なレイアウト。よくある課題の 1 つは、ヘッダーやフッターなどの固定高さの要素によって占められるスペースを除外しながら、ページの高さ全体を占めるようにコンテンツ領域を設定することです。このガイドでは、最新のブラウザ間で互換性のある純粋な CSS を使用した包括的なソリューションを提供します。

HTML 構造には、ヘッダー、コンテンツ div、およびフッターが含まれます。 CSS では、html 要素と body 要素の高さが最低 100% で、マージンやパディングがないことを確認することから始めます。

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

コンテンツ領域を配置するには、複数の範囲にわたる #wrapper div を導入します。絶対配置を使用したビューポート全体。

<code class="css">#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}</code>

#wrapper 内で、最小高さ 100% のコンテンツ div (#content) を定義します。これにより、使用可能なスペース全体が確実に埋められるようになります。

<code class="css">#content {
  min-height: 100%;
}</code>

ヘッダーとフッターの高さを考慮して、負のマージンを使用してそれらをオフセットします。

<code class="css">header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

footer {
  margin-bottom: -50px; /* Adjust to match footer height */
  height: 50px;
}</code>

このアプローチにより、 content div は、ヘッダーとフッターの固定高さを考慮した後に残ったスペースを占有し、その結果、さまざまな画面サイズやデバイスの向きに適応するシームレスで動的なレイアウトが得られます。

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