この記事の要点

$elem.height() = コンテンツ領域の高さ (padding / border / margin 含まず) .innerHeight() = コンテンツ + padding .outerHeight() = コンテンツ + padding + border .outerHeight(true) = コンテンツ + padding + border + margin $(window).height() = ビューポート高、$(document).height() = ドキュメント全体高

4 種類の高さ取得

メソッド	含まれるもの	CSS 相当
.height()	content	height
.innerHeight()	content + padding	clientHeight
.outerHeight()	content + padding + border	offsetHeight
.outerHeight(true)	content + padding + border + margin	—

// 例: <div style="height:100; padding:10; border:5; margin:20">
$('#box').height();           // 100 (コンテンツのみ)
$('#box').innerHeight();      // 120 (100 + 10*2 padding)
$('#box').outerHeight();      // 130 (120 + 5*2 border)
$('#box').outerHeight(true);  // 170 (130 + 20*2 margin)

高さを設定する

// セット (数値は px、文字列は単位含めて指定)
$('#box').height(500);          // height: 500px;
$('#box').height('50vh');       // height: 50vh;
$('#box').height('100%');       // height: 100%;

// 関数で動的に設定
$('div').height(function(index, currentHeight) {
    return currentHeight + 10;  // それぞれ +10
});

// アニメーション
$('#box').animate({ height: 300 }, 400);

// ❌ NG: .css('height') は文字列 ("100px") が返る
parseInt($('#box').css('height'));  // 数値化が必要

// ✅ .height() なら最初から数値
const h = $('#box').height();

box-sizing の影響

CSS の box-sizing: border-box を指定すると、height プロパティが「border まで含めた値」になります。ただし jQuery の .height() は常にコンテンツ高を返すため、CSS 設定と一致しないことがあります:

/* box-sizing: border-box */
#box {
    box-sizing: border-box;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
}
/* 表示高は 100px、コンテンツ高は 100 - 10*2 - 5*2 = 70px */

$('#box').height();           // 70  ★ コンテンツのみ
$('#box').innerHeight();      // 90  (70 + 10*2 padding)
$('#box').outerHeight();      // 100 (90 + 5*2 border)

Window / Document の特殊扱い

// ビューポート（表示領域）の高さ
$(window).height();                 // ブラウザの可視領域
window.innerHeight;                 // Vanilla 同等

// ドキュメント全体の高さ（スクロール領域含む）
$(document).height();
Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight
);

// スクロール位置 + 表示高 = ドキュメント全体高 なら最下部
$(window).on('scroll', function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        loadMore();   // 無限スクロール
    }
});

Vanilla JavaScript での同等処理

jQuery	Vanilla	備考
.height()	el.clientHeight - paddingTop - paddingBottom	計算必要
.innerHeight()	el.clientHeight	padding 込み
.outerHeight()	el.offsetHeight	border 込み
.outerHeight(true)	el.getBoundingClientRect().height + margin	margin は別計算
$(window).height()	window.innerHeight	—
$(document).height()	document.documentElement.scrollHeight	—

const el = document.getElementById('box');

el.clientHeight;     // padding 込み (border / scrollbar 除く)
el.offsetHeight;     // border 込み
el.scrollHeight;     // 中身全部 (溢れた分も含む)
el.getBoundingClientRect().height;  // 小数精度の表示高

// ResizeObserver でリサイズ検知 (古い resize イベントの代替)
const ro = new ResizeObserver(entries => {
    for (const e of entries) {
        console.log('新しい高さ:', e.contentRect.height);
    }
});
ro.observe(document.getElementById('box'));

典型的なユースケース

// 1. 要素を画面いっぱいに
$('#hero').height($(window).height());
$(window).on('resize', () => $('#hero').height($(window).height()));
// CSS の 100vh で代替可能（モバイルアドレスバー問題あり）

// 2. 複数要素の高さを揃える
let maxHeight = 0;
$('.card').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.card').height(maxHeight);
// CSS の display: grid で代替可能

// 3. 隠し要素の真の高さ取得
const $hidden = $('#menu');
const realHeight = $hidden.css({ display: 'block', visibility: 'hidden', position: 'absolute' })
    .height();
$hidden.css({ display: 'none', visibility: '', position: '' });

// 4. スクロール検知（無限スクロール）
$(window).on('scroll', function() {
    const scrolled = $(window).scrollTop();
    const total = $(document).height() - $(window).height();
    const percent = (scrolled / total) * 100;
    $('.progress-bar').width(percent + '%');
});

レスポンシブ対応の注意

• モバイル Safari の 100vh はアドレスバー高を含む → window.innerHeight で実測推奨
• iOS の bounce スクロールで $(document).height() が一時的に揺れる
• ResizeObserver は resize イベントより性能が良く正確
• position:fixed や transform 内では vh の挙動が変わる
• CSS Custom Property + JS で --vh を実測する手法が一般的

// モバイル対応 vh
function setVh() {
    document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
}
setVh();
window.addEventListener('resize', setVh);

/* CSS */
/* .full { height: calc(var(--vh, 1vh) * 100); } */

FAQ

Q: .height() が 0 を返す
A: 要素が display:none の場合や、まだ DOM レンダリング前。$(document).ready() 内で実行 or 一時的に表示してから取得。

Q: .height(500) と .css("height", "500px") の違いは？
A: 結果はほぼ同じ。.height() は数値だけで OK（px 自動）、.css() は単位文字列必須。

Q: ResizeObserver は IE で動く？
A: IE は非対応。IE 切り捨て前提なら ResizeObserver、IE 対応なら resize イベント + throttle がベター。