HTML·CSS로 화면 높이에 딱 맞는 웹 페이지 만들기 3가지 방법

웹 페이지의 높이를 브라우저 화면(뷰포트) 높이에 정확히 맞추고 싶을 때 활용할 수 있는 방법은 여러 가지가 있습니다. 상황과 목적에 따라 적합한 기법이 다르므로, 아래에서 대표적인 세 가지 방법을 살펴보겠습니다.

1. 상대적 높이(Relative Height) 사용하기

가장 기본적인 방법은 html과 body 요소의 높이를 백분율(%)로 지정하는 것입니다. 부모 요소인 html부터 순차적으로 100%를 지정해야 자식 요소에서도 화면 전체 높이를 기준으로 삼을 수 있습니다.

html, body {
    height: 100%;
}

이렇게 설정하면 내부 콘텐츠 컨테이너에도 height: 100%를 적용해 화면 높이를 그대로 상속받을 수 있습니다.

2. 고정 위치(Fixed Positioning) 사용하기

특정 영역을 항상 화면 전체에 고정하고 싶다면 position: fixed를 활용할 수 있습니다. 네 방향 오프셋을 모두 0으로 지정하면 해당 요소가 뷰포트 전체를 꽉 채우게 됩니다.

#main {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

이 방식은 스크롤과 무관하게 항상 화면에 고정되어야 하는 풀스크린 오버레이나 배경 화면 등에 유용합니다. 다만 문서 흐름에서 벗어나기 때문에 일반적인 페이지 레이아웃에는 주의해서 사용해야 합니다.

3. 뷰포트 단위(VH) 사용하기 — 가장 간편한 방법

CSS3에서 도입된 뷰포트 단위인 vh(viewport height)를 사용하면 별도의 상속 구조 없이 한 줄로 화면 높이에 맞출 수 있습니다. 100vh는 브라우저 화면 높이의 100%를 의미합니다.

.container {
    height: 100vh;
}

예를 들어 화면의 절반 높이만큼 차지하게 하려면 height: 50vh;처럼 원하는 비율로 자유롭게 조절할 수 있습니다.

추가 팁: 모바일 환경에서의 주의점

모바일 브라우저는 주소창이 나타나거나 사라질 때 뷰포트 높이가 변동됩니다. 이 경우 dvh(dynamic viewport height) 단위를 사용하면 더 안정적으로 대응할 수 있습니다.

.container {
    height: 100dvh; /* 동적 뷰포트 높이 */
}

마무리

정리하자면, 간단한 전체 높이 설정에는 height: 100%, 화면 고정 요소에는 position: fixed, 그리고 가장 직관적이고 현대적인 방법으로는 100vh(또는 모바일 대응 시 100dvh)를 사용하는 것이 좋습니다. 프로젝트의 요구 사항에 맞게 적절한 방법을 선택해 활용하시기 바랍니다.