HTML의 screen.availHeight 속성은 사용자 화면에서 실제로 웹 콘텐츠가 표시될 수 있는 영역의 높이를 픽셀(px) 단위로 반환합니다. 이 값에는 운영체제 작업 표시줄 등 화면을 차지하는 인터페이스 요소는 포함되지 않으므로, 전체 화면 높이(screen.height)보다 작거나 같은 값이 나옵니다.
문법(Syntax)
사용 문법은 다음과 같습니다.
screen.availHeight
별도의 매개변수 없이 호출하며, 반환값은 항상 숫자(픽셀 단위)입니다.
예제(Example)
버튼을 클릭하면 현재 화면의 사용 가능한 높이를 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 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;
margin: 1rem auto;
font-weight: bold;
font-family: sans-serif;
}
</style>
<body>
<h1>HTML screen availHeight Property</h1>
<button class="btn" onclick="get()">Show availHeight Value</button>
<div class="show"></div>
<script>
function get() {
document.querySelector(".show").innerHTML = "Available Height is " + screen.availHeight + " px";
}
</script>
</body>
</html>실행 결과(Output)
페이지에서 “Show availHeight Value” 버튼을 클릭하면 아래와 같이 availHeight 속성 값이 표시됩니다.
참고: 함께 알아두면 좋은 관련 속성
- screen.height: 작업 표시줄 등을 포함한 화면의 전체 높이를 반환합니다.
- screen.availWidth: 인터페이스 요소를 제외한 화면의 사용 가능한 너비를 반환합니다.
- screen.width: 화면의 전체 너비를 반환합니다.
이처럼 availHeight는 팝업 창 크기 계산이나 반응형 레이아웃 처리 시 유용하게 활용할 수 있습니다.