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

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

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

html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

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

#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

#content {
  min-height: 100%;
}

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

header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

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

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