HTML의 window.innerHeight 속성은 브라우저 창에서 HTML 문서의 콘텐츠가 실제로 표시되는 영역(콘텐츠 영역)의 높이를 픽셀(px) 단위로 반환합니다. 브라우저의 메뉴 바, 주소 표시줄, 북마크 바 등은 포함되지 않으며, 오직 웹 페이지가 렌더링되는 영역만 측정됩니다.
문법(Syntax)
기본 문법은 다음과 같습니다.
window.innerHeight
알아두면 좋은 점
- 반환값은 정수형 픽셀 값이며, 읽기 전용(read-only) 속성입니다.
- 창의 가로 크기가 필요하다면
window.innerWidth속성을 함께 사용할 수 있습니다. - 사용자가 브라우저 창 크기를 조절하면 값도 함께 변하므로,
resize이벤트와 조합하면 반응형 화면 처리에 유용합니다. - 인터넷 익스플로러 8 이하 버전에서는 지원되지 않으므로, 하위 호환이 필요한 경우
document.documentElement.clientHeight를 대안으로 사용할 수 있습니다.
예제
다음은 버튼을 클릭하면 현재 창의 내부 높이(innerHeight) 값을 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>HTML Window innerHeight 속성</h1>
<button onclick="display()" class="btn">창 내부 높이 보기</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = '창의 내부 높이: ' + window.innerHeight + "px";
}
</script>
</body>
</html>실행 결과
페이지에서 “창 내부 높이 보기” 버튼을 클릭하면 아래와 같이 현재 브라우저 콘텐츠 영역의 높이가 픽셀 단위로 표시됩니다.
