CSS만으로 요소를 브라우저 창의 전체 높이에 맞게 늘리고 싶다면 html과 body 요소의 높이를 100%로 설정한 뒤, 대상 요소에도 같은 방식으로 높이를 지정하면 됩니다. 백분율(%) 높이는 부모 요소의 높이를 기준으로 계산되기 때문에, 부모 요소인 html과 body의 높이를 먼저 정해 주는 것이 핵심입니다.
예제
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.fullHeight {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
background: rgb(135, 27, 207);
color: white;
font-size: 40px;
padding: 40px;
}
</style>
</head>
<body>
<div class="fullHeight">이 div 요소는 창의 전체 높이와 너비에 맞게 늘어납니다</div>
</body>
</html>코드 설명
* { box-sizing: border-box; }는 패딩과 테두리를 요소의 전체 크기에 포함시켜, padding: 40px을 적용해도 요소가 창보다 커지지 않도록 합니다.
html, body { height: 100%; margin: 0; }는 문서 전체의 기본 높이를 뷰포트 높이와 일치시키고, 브라우저 기본 여백을 제거하여 원치 않는 스크롤바가 생기지 않게 합니다.
마지막으로 .fullHeight { height: 100%; } 덕분에 해당 div는 부모 요소인 body의 높이, 즉 브라우저 창 전체 높이를 꽉 채우게 됩니다.
실행 결과
위 코드를 실행하면 보라색 배경의 div 요소가 브라우저 창의 전체 높이와 너비를 가득 채우는 것을 확인할 수 있습니다.
참고: 100vh 단위 활용하기
부모 요소의 높이를 일일이 설정하지 않고 싶다면 뷰포트 단위인 height: 100vh;를 사용하는 방법도 있습니다. 100vh는 브라우저 창(뷰포트) 높이의 100%를 의미하므로, 별도의 부모 높이 설정 없이도 요소를 화면 전체 높이에 맞출 수 있습니다.