【JS】ヘッダーの高さが不定でもコンテンツ全体の高さを常に合計100%にしたいときの実装方法

jQueryを使用した例はよく見かけたんですがそれ以外の例をあまり見かけなかったので。今回はネイティブのJSのみで書いてみます。

考え方

CSSのcalcを使ってウィンドウ全体の高さからヘッダーの高さを引き、高さの合計が100%になるようにします。calcはほんと便利。

流れとしてはコンテンツの読み込みが終わったタイミングでイベント発火。ヘッダーの高さを取得し、その下のコンテナのheightを「ウィンドウ高さ-ヘッダーの高さ」にするという感じです。

コード

ヘッダーにはheader、コンテンツ部分にはcontainerがidとしてそれぞれ当てられているとします。

document.addEventListener('DOMContentLoaded',() => {
  const header = document.getElementById("header")
  const container = document.getElementById("container")
  const headerHeight = header.clientHeight; // ヘッダーの高さを取得
  const containerHeight = "calc(100vh - " + headerHeight + "px)"; // calc（ウィンドウの高さ - ヘッダーの高さ（px））
}, false);

↓しょぼいデモ。分かりづらい。