固定ヘッダーとフッターで 100% の身長 Div を達成するにはどうすればよいですか?

固定ヘッダーとフッターで 100% の身長 Div を達成

初期状況:

Web ページ レイアウト内、固定高のヘッダーを除き、本文の高さ全体を満たすコンテンツ div を作成したいとします。 footer.

解決策:

1. 最小高さのベースラインを確立します:

   html と body を宣言しますmin-height: 100%; の要素。これにより、ウィンドウの高さ全体に拡張されます。

2. コンテンツのラッパーを作成します:

   すべてを含む #wrapper div を作成します。ヘッダーとフッターを除きます。絶対位置に配置し、ウィンドウ全体の寸法に制限します。

3. コンテンツ領域を定義します:

   #wrapper 内に #content を作成します。メインコンテンツのdiv。 min-height を 100% に設定して、残りのスペースを埋めます。

4. ヘッダーとフッターを配置します:

   次のヘッダー要素とフッター要素を追加します。固定の高さと適切な色。 #wrapper の上下に配置するには、margin-top プロパティと margin-bottom プロパティを負の値で使用します。

実装:

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

<code class="html"><div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div></code>

このコードは、#content div が固定高さに対応しながらボディ全体の高さを確実に埋めるようにします。ヘッダーとフッター。これは、Modernizr スクリプトを使用して最新のブラウザーと IE8 で動作します (または、ヘッダー要素とフッター要素の代わりに div を使用するように変更できます)。

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