clientHeight,offsetHeight,scrollHeight

JS
<div id="example" style="height: 100px; overflow: auto; padding: 10px; border: 2px solid black;">
    <p>これは非常に長いコンテンツです。</p>
    <p>これは非常に長いコンテンツです。</p>
    <p>これは非常に長いコンテンツです。</p>
</div>

<script>
    const element = document.getElementById("example");

    console.log("clientHeight (表示領域の高さ):", element.clientHeight);
    console.log("scrollHeight (全コンテンツの高さ):", element.scrollHeight);
    console.log("offsetHeight (ボーダーを含む全体の高さ):", element.offsetHeight);
</script>
┌────────────────────────────────────┐  ← offsetHeight = 104px
│  ボーダー (2px)                     │
│ ┌───────────────────────────────┐  │
│ │  パディング (10px)             │  │
│ │ ┌───────────────────────────┐ │  │
│ │ │ 表示領域 (clientHeight)   │ │  │
│ │ │                           │ │  │
│ │ │ コンテンツの一部のみ       │ │  │
│ │ └───────↑スクロール可能↑───────┘ │  │
│ └───────────────────────────────┘  │
│  ボーダー (2px)                     │
└────────────────────────────────────┘

全コンテンツの高さ（scrollHeight = 300px）