JavaScript 강의 실습을 하던 중에 아래와 같이 코드를 작성했을 때 수직선이 viewport 전체를 차지하지 않는 문제가 있었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coordinates</title>
<link rel="stylesheet" href="style.css" />
<style>
body {
height: 100%;
}
.vertical {
position: absolute;
top: 0;
height: 100%;
border-left: 1px solid #fff;
}
</style>
</head>
<body>
<div class="vertical"></div>
</body>
</html>어떤 요소가 영역의 전체 크기를 차지하도록 만들 때 100%라는 값을 자주 사용한다. 따라서 100%를 먼저 살펴보면 백분율이 참조하는 값은 부모 요소이므로, 부모 요소의 100%를 차지함을 의미한다.
문제 발생 원인
컨텐츠가 없는 빈 html 문서의 경우를 생각해보자.
이때 HTML 요소에 대해 height 값이 제공되지 않은 상태에서 body의 height/min-height를 100%로 설정하면 body의 높이는 0이다. 하지만 width 값이 제공되지 않은 상태에서 body의 width를 100%로 설정하면 body의 너비는 전체 페이지의 너비가 된다.
즉, height의 경우에는 페이지 전체 높이를 갖고자 한다면 추가적인 설정이 필요하다. 반면에 width는 html 및 body에서 따로 설정하지 않아도 기본적으로 페이지의 전체 크기를 갖는다.
이번에는 페이지의 일부 높이를 차지하는 컨텐츠가 들어있는 html 문서를 살펴보자.
body의 width와 height를 100%로 설정했을 때 body의 영역은 아래와 같다.
즉 body 요소가 참조할 상위 height 값은 HTML의 height이고, html 내부의 컨텐츠는 138px만큼의 높이를 갖고 있기 때문에 body의 height가 viewport의 높이가 아니라 138px이 되는 것이다.
전체 페이지 height 세팅 방법
수년 동안은 아래와 같이 코드를 작성했다고 한다.
html {
height: 100%;
}
body {
min-height: 100%;
}이렇게 하면 html은 상위 viewport를 참조해서 viewport 값의 100%와 같은 높이를 갖게 되고, body의 min-height 값은 html의 높이와 일치하게 된다.
그런데 이 경우에는 컨텐츠가 현재 보이는 페이지보다 커지면 body가 html보다 더 커질 수 있고, 일부 장치에서 스크롤 문제가 발생할 수 있다고 한다.
이 문제에 대한 해결책은 body에 min-height를 적용하는 것이다.
body {
min-height: 100vh;
}이렇게 html에 대해 높이를 설정하지 않으면 body에 지정된 높이와 동일한 값을 가정하게 된다. 따라서 html 요소의 overflow를 방지할 수 있고 두 요소 모두 콘텐츠의 높이에 따라 함께 커진다.
