CSS clientHeight, offsetHeight, scrollHeight 속성 완벽 정리

웹 개발에서 요소의 실제 크기를 자바스크립트로 확인해야 할 때가 많습니다. 이때 clientHeight, offsetHeight, scrollHeight 세 가지 속성을 활용하게 되는데, 각각 계산 방식이 달라 상황에 맞게 선택하는 것이 중요합니다.

clientHeight란?

clientHeight는 요소의 내용 영역 + 위아래 패딩(padding)까지의 높이를 픽셀 단위로 반환합니다. 다만 테두리(border), 마진(margin), 스크롤바의 높이는 포함되지 않습니다.

offsetHeight란?

offsetHeight는 요소의 내용 영역 + 수직 패딩 + 위아래 테두리까지의 전체 높이를 반환합니다. 마진은 역시 포함되지 않습니다. 즉, 화면에 실제로 차지하는 높이에 가장 가까운 값입니다.

scrollHeight란?

scrollHeight는 요소의 내용 영역 + 수직 패딩뿐만 아니라, overflow 속성으로 인해 화면에 잘려서 보이지 않는 숨겨진 콘텐츠의 높이까지 모두 포합하여 반환합니다. 스크롤 가능한 전체 콘텐츠 높이를 알고 싶을 때 유용합니다.

아래 예제들을 통해 세 속성의 차이를 직접 확인할 수 있습니다.

예제 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()">Get Client Height</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 = "Client Height is " + y + "px";
}
</script>
</body>
</html>

실행 결과: 버튼을 클릭하면 demo 요소의 clientHeight 값이 출력됩니다. 패딩은 포함되지만 테두리와 스크롤바는 제외된 값임을 확인할 수 있습니다.

예제 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()">Get Offset Height</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 = "Offset Height is " + y + "px";
}
</script>
</body>
</html>

실행 결과: 버튼을 클릭하면 demo 요소의 offsetHeight 값이 출력됩니다. clientHeight보다 큰 값이 나오는데, 이는 두께 10px의 테두리가 양쪽으로 포함되기 때문입니다.

예제 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()">Get Scroll Height</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 = "Scroll Height is " + y + "px";
}
</script>
</body>
</html>

실행 결과: 버튼을 클릭하면 demo 요소의 scrollHeight 값이 출력됩니다. 부모 컨테이너보다 내용이 길어 스크롤이 발생하는 경우, 화면에 보이지 않는 부분까지 포함한 전체 높이가 반환됩니다.

세 속성 비교 요약

속성	패딩	테두리	마진	숨겨진 콘텐츠
clientHeight	포함	제외	제외	제외
offsetHeight	포함	포함	제외	제외
scrollHeight	포함	제외	제외	포함

요소의 시각적 크기가 필요하면 offsetHeight, 내부 여백을 제외한 콘텐츠 영역이 필요하면 clientHeight, 스크롤되는 전체 콘텐츠 높이가 필요하면 scrollHeight를 사용하는 것이 좋습니다.