メインコンテンツのdivをCSSとHTMLで画面の高さいっぱいにする方法

positionプロパティとは

positionプロパティは、要素の配置方法（static、relative、absolute、fixed、sticky）を指定するためのCSSプロパティです。このプロパティを活用することで、ヘッダーやフッターの高さを考慮しながら、メインコンテンツを画面の残りの領域いっぱいに表示できます。

高さをパーセント指定せずに実現する方法

以下の例では、高さをパーセンテージで指定する必要がなく、jQueryも不要です。position: absoluteとtop・bottomを組み合わせることで、ブラウザが残りの高さを自動的に計算してくれます。

.mainbody{
    position: absolute; /* 要素の位置をabsolute（絶対配置）に設定 */
    top: 30px;          /* ヘッダーの高さを30pxに定義 */
    bottom: 10px;       /* フッターの高さを10pxに定義 */
    width: 100%;        /* 幅を100%に設定 */
}

仕組みの解説

このテクニックのポイントは以下の通りです。

• position: absolute：要素を絶対配置にし、通常のドキュメントフローから切り離します。
• top: 30px：ヘッダーの高さ分だけ下から配置を開始します。
• bottom: 10px：フッターの高さ分だけ下に余白を残します。

topとbottomの両方を指定すると、要素の高さは「画面の高さ − ヘッダーの高さ − フッターの高さ」として自動計算されます。そのため、heightを明示的に指定する必要がありません。

注意点

親要素（通常はbodyやラッパー要素）にposition: relativeが指定されていない場合、絶対配置の基準はビューポート（初期包含ブロック）になります。画面全体を基準にしたい場合は問題ありませんが、特定のコンテナ内に収めたい場合は、親要素へのposition: relativeの指定を忘れないようにしましょう。

代替手段：Flexboxや100vhの活用

近年では、以下のような方法も一般的です。

• Flexbox：display: flexとflex-direction: columnを親要素に指定し、メインコンテンツにflex: 1を設定する方法。
• 100vh（dvh）：min-height: 100vhやheight: 100dvhを活用する方法。モバイルブラウザのアドレスバーの挙動を考慮する場合はdvhが便利です。

状況に応じて最適な手法を選択することで、より柔軟で保守性の高いレイアウトを実現できます。