【jQuery】ブラウザ・要素の高さ取得完全ガイド｜height()・innerHeight()・outerHeight()・スマホ100vh問題まで

jQueryで高さを取得・設定するメソッドは複数あり、何を取得するかによって使うメソッドが異なります。また、スマートフォンでは $(window).height() と CSS の 100vh がアドレスバーの影響で一致しないという実務でよくある問題があります。

ブラウザ（ウィンドウ・ビューポート）の高さを取得する

ブラウザの表示領域の高さを取得する方法は複数あります。それぞれ取得する値が微妙に異なります。

// ビューポートの高さ（jQuery推奨）
var viewportH = $(window).height();
console.log('ビューポート高さ:', viewportH, 'px');

// ページ全体の高さ
var docH = $(document).height();
console.log('ページ全体の高さ:', docH, 'px');

// スクロール可能な最大量（ページ全体 - ビューポート）
var maxScroll = docH - viewportH;
console.log('最大スクロール量:', maxScroll, 'px');

要素の高さを取得する：height() / innerHeight() / outerHeight()

要素の高さを取得するメソッドも3種類あり、パディング・ボーダー・マージンを含むかどうかが異なります。

var $box = $('#my-box');

console.log('height()        :', $box.height(),          'px');  // コンテンツのみ
console.log('innerHeight()   :', $box.innerHeight(),     'px');  // + padding
console.log('outerHeight()   :', $box.outerHeight(),     'px');  // + padding + border
console.log('outerHeight(true):', $box.outerHeight(true),'px');  // + padding + border + margin

取得した高さを要素に適用する基本パターン

フルスクリーンのセクションやモーダルウィンドウなど、ブラウザの高さに合わせて要素サイズを動的に設定するパターンです。

単一要素への適用

$(function () {
  // ビューポートの高さをそのまま要素に適用
  $('#hero-section').css('height', $(window).height() + 'px');
});

複数要素への適用（ヘッダーを引いた残り高さ）

$(function () {
  var headerH  = $('#site-header').outerHeight(true);
  var contentH = $(window).height() - headerH;

  // コンテンツエリアをヘッダー以外の全高さに設定
  $('#main-content').css('min-height', contentH + 'px');
});

height()で設定する vs css(“height”)で設定する

// どちらも同じ結果（数値で渡すとpx単位として処理される）
$('#box').height($(window).height());          // 数値のみ
$('#box').css('height', $(window).height());   // 単位なし数値もpxとして処理
$('#box').css('height', $(window).height() + 'px');  // 明示的にpx

// heightにパーセントや他の単位を使う場合は文字列で渡す
$('#box').css('height', '50vh');

リサイズイベントに対応する

ウィンドウサイズが変わるたびに高さを再計算・再設定するにはresize イベントを使います。resizeイベントは連続発火するためdebounceで最適化します。

function debounce(fn, wait) {
  var timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(fn, wait);
  };
}

function setFullHeight() {
  var h = $(window).height();
  $('#hero-section').css('height', h + 'px');
}

$(function () {
  setFullHeight();  // 初期実行

  // リサイズ時は200ms後に一度だけ実行（debounce）
  $(window).on('resize', debounce(setFullHeight, 200));
});

スマホで100vhが正しく機能しない問題とCSS変数による解決策

スマートフォンのブラウザでは height: 100vh を指定すると、アドレスバーの高さを含んだ値になり、実際の表示領域からはみ出す問題があります。これはiOS Safari・モバイルChromeで広く知られた挙動です。

問題の仕組み

CSS変数（–vh）を使った解決策

JavaScriptで実際のビューポート高さを取得してCSS変数に設定し、CSSで var(--vh) を参照する方法が現在のベストプラクティスです。

function setVH() {
  // window.innerHeightでより正確なビューポート高さを取得
  var vh = window.innerHeight * 0.01;
  // CSS変数としてルート要素に設定
  document.documentElement.style.setProperty('--vh', vh + 'px');
}

$(function () {
  setVH();
  $(window).on('resize', debounce(setVH, 200));
});

CSS側での使い方

.hero {
  /* 100vh の代わりに calc(var(--vh) * 100) を使う */
  height: calc(var(--vh, 1vh) * 100);
}

/* フォールバック: --vh が未設定の場合は 1vh をデフォルト値として使用 */
.hero-section {
  min-height: 100vh;  /* 非対応環境向けフォールバック */
  min-height: calc(var(--vh, 1vh) * 100);
}

実務的な実装パターン：フルスクリーンヒーローセクション

ヘッダーを含む実際のページで、ヒーロー画像をビューポートいっぱいに表示する完全な実装例です。

<header id="site-header">ヘッダー</header>
<section id="hero">
  <h1>メインビジュアル</h1>
</section>
<main id="content">コンテンツ</main>

#hero {
  background: #1e40af;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* JavaScriptでheightを上書きするため初期値はmin-height */
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}

function debounce(fn, wait) {
  var timer;
  return function () { clearTimeout(timer); timer = setTimeout(fn, wait); };
}

function adjustHero() {
  // CSS変数を更新
  var vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', vh + 'px');

  // ヘッダーの高さを引いた残り高さをヒーローに設定
  var headerH = $('#site-header').outerHeight();
  var heroH   = $(window).height() - headerH;
  $('#hero').css('height', heroH + 'px');
}

$(function () {
  adjustHero();
  $(window).on('resize', debounce(adjustHero, 200));
});

まとめ

jQueryで高さを扱う際の要点は次の3点です。

• ウィンドウ高さは $(window).height()、要素高さはpaddingやborderの含み方で使うメソッドが変わる
• リサイズ対応はdebounceを使ってパフォーマンスを最適化する
• スマホの100vh問題はCSS変数 --vh または dvh で対応する

関連記事: 要素の幅・高さを取得・設定する完全ガイド / スクロールで要素が表示されたら実行する完全ガイド

よくある質問（FAQ）