CSSのclientHeight・offsetHeight・scrollHeightの違いと使い分けを徹底解説

JavaScriptでDOM要素の高さを取得するときによく使われるのが、clientHeight、offsetHeight、scrollHeight の3つのプロパティです。いずれも要素の高さをピクセル単位で返しますが、パディング・ボーダー・はみ出したコンテンツの扱いがそれぞれ異なるため、用途に応じた使い分けが必要です。本記事では、各プロパティの特徴と違いを、サンプルコード付きでわかりやすく解説します。

clientHeightとは

clientHeight は、要素の「見えている内部領域」の高さを返すプロパティです。具体的には、コンテンツ部分と上下のパディングを合計した値になります。ボーダーやマージンは含まれず、横スクロールバーが表示されている場合はその高さも含まれない点に注意してください。

offsetHeightとは

offsetHeight は、コンテンツ＋上下のパディング＋上下のボーダーを含めた高さを返します。マージンは含まれません。CSSボックスモデルでいう「border-box」に近い考え方で、要素がレイアウト上で実際に占める高さを把握したいときに便利です。

scrollHeightとは

scrollHeight は、overflow プロパティによって画面からあふれて見えなくなったコンテンツも含めた、要素の内容全体の高さを返します。パディングは含まれますが、ボーダーとマージンは含まれません。スクロール領域の全高さを取得できるため、「末尾までスクロールしたかどうか」の判定や無限スクロールの実装などでよく活用されます。

3つのプロパティの違いまとめ

プロパティ	パディング	ボーダー	マージン	はみ出したコンテンツ
clientHeight	含む	含まない	含まない	含まない
offsetHeight	含む	含む	含まない	含まない
scrollHeight	含む	含まない	含まない	含む

サンプルコードで動作を確認

続いて、各プロパティの実際の挙動を確認できるサンプルを紹介します。いずれもボタンをクリックすると、対象のdiv要素（id="demo"）の高さが画面下部に表示される仕組みです。

例1：clientHeight を取得する

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   margin-top: 10px;
   height: 200px;
   width: 200px;
   overflow: auto;
   margin: 20px;
}
#demo {
   height: 250px;
   padding: 20px;
   background-color: beige;
   border: 2px ridge red;
}
</style>
</head>
<body>
<button onclick="getHeight()">clientHeightを取得</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
   let myItem = document.getElementById("demo");
   let y = myItem.clientHeight;
   document.getElementById("display").innerHTML = "clientHeight：" + y + "px";
}
</script>
</body>
</html>

実行結果

ボタンをクリックすると、次のように clientHeight の値が表示されます。

CSSのclientHeight・offsetHeight・scrollHeightの違いと使い分けを徹底解説

例2：offsetHeight を取得する

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   height: 180px;
   width: 180px;
   overflow: auto;
   margin: 20px;
}
#demo {
   height: 220px;
   padding: 20px;
   background-color: cornflowerblue;
   border: 10px ridge red;
   color: white;
}
</style>
</head>
<body>
<button onclick="getHeight()">offsetHeightを取得</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
   let myItem = document.getElementById("demo");
   let y = myItem.offsetHeight;
   document.getElementById("display").innerHTML = "offsetHeight：" + y + "px";
}
</script>
</body>
</html>

実行結果

ボタンをクリックすると、次のように offsetHeight の値が表示されます。

CSSのclientHeight・offsetHeight・scrollHeightの違いと使い分けを徹底解説

例3：scrollHeight を取得する

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   margin-top: 10px;
   height: 200px;
   width: 200px;
   overflow: auto;
   margin: 20px;
}
#demo {
   height: 400px;
   padding: 20px;
   background-color: bisque;
   border: 1px solid green;
}
</style>
</head>
<body>
<button onclick="getHeight()">scrollHeightを取得</button>
<div id="parent">
<div id="demo">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
   let myItem = document.getElementById("demo");
   let y = myItem.scrollHeight;
   document.getElementById("display").innerHTML = "scrollHeight：" + y + "px";
}
</script>
</body>
</html>

実行結果

ボタンをクリックすると、次のように scrollHeight の値が表示されます。

CSSのclientHeight・offsetHeight・scrollHeightの違いと使い分けを徹底解説

まとめ

表示されている領域の高さだけを知りたい場合は clientHeight、ボーダーを含んだ要素そのものの大きさを知りたい場合は offsetHeight、スクロールで隠れている部分まで含めた全高さを知りたい場合は scrollHeight を使うのが基本です。3つの違いを正しく理解しておくことで、高さ計算によるレイアウト崩れやスクロール制御のバグを防ぎやすくなります。

CSSアニメーションで隠れた要素を滑らかに表示する方法

CSS用語をマスターしよう：Web開発者・デザイナー必須の完全用語集

CSSのmarginプロパティとは？基本構文から実践的な使い方まで解説
CSSのmarginプロパティとは CSSのmarginプロパティは、margin-top・margin-right・margin-bottom・margin-leftの4つのプロパティをまとめて指定できるショートハンド（一括指定）プロパティです。要素の外側に余白を設けることで、要素同士の間隔やページ端との距離を自由に調整できます。もちろん、各辺ごとに個別のマージンを設定することも可能です。値の指定ルール marginプロパティでは、指定する値の数によって適用される方向が変わります。値が1つ：上下左右すべてに同じ値が適用される値が2つ：1つ目が「上下」、2つ目が「左右」に適用される
CSSで要素の幅と高さを指定する方法！height・widthプロパティの基本と実例
CSSの height プロパティと width プロパティは、それぞれ要素の高さと幅を指定するために使用されます。また、max-height、max-width、min-height、min-width プロパティを使えば、これらのサイズに上限値や下限値を設定することも可能です。基本構文 CSSの height および width プロパティの基本的な書き方は以下の通りです。 Selector { height: /*値*/ width: /*値*/ } 要素の実際のサイズの計算方法要素の実際の表示サイズは、width や height