첫 화면 높이를 채웠는데 아래 버튼이 가려집니다

모바일 화면을 채우려고 height:100vh를 넣었는데 주소창이 펼쳐진 상태에서는 아래 버튼이 보이지 않을 수 있습니다. 콘텐츠가 잘못 계산된 것처럼 보여도 브라우저의 도구막대가 차지하는 영역과 높이 단위의 기준이 다른 문제일 수 있습니다. 고정 높이, 최소 높이, 내부 스크롤을 함께 봐야 합니다.

예제 화면은 작은 가시 영역과 큰 영역의 관계를 수치로 그린 도식입니다. 실제 휴대전화 주소창을 재현하거나 특정 기기의 높이를 측정한 결과가 아닙니다. 동작은 적용할 기기에서 별도로 확인해야 합니다.

svh·lvh·dvh는 서로 다른 기준을 표현합니다

높이 단위를 고르는 출발점
단위기준생각할 점
svh작은 viewport 높이도구막대가 펼쳐진 조건을 고려한 안정적인 영역
lvh큰 viewport 높이도구막대가 줄어든 큰 영역
dvh동적으로 달라지는 viewport 높이도구막대 변화에 따라 높이가 달라질 수 있음
vhMDN 안내상 큰 viewport 기준과 대응작은 가시 영역과의 차이를 확인

작은 영역에 항상 핵심 행동을 남기려는 화면과, 가시 영역에 맞춰 패널을 늘렸다 줄이려는 화면은 선택이 다릅니다. dvh라는 새 단위를 썼다는 이유만으로 모든 구성이 좋아지는 것은 아닙니다. 높이가 변할 때 내용과 스크롤 위치가 어떻게 움직일지도 봅니다.

내용이 늘어날 페이지는 최소 높이부터 검토합니다

.intro-page {
  min-height: 100vh;  /* 지원하지 않는 환경의 출발점 */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.intro-content { flex: 1; }
.intro-actions { margin-top: auto; }

min-height는 내용이 더 길어질 길을 남깁니다. 반대로 height를 고정하고 overflow를 숨기면 글자가 커지거나 안내가 추가된 순간 아래 부분이 사라질 수 있습니다. 어떤 높이를 채우려는지와 콘텐츠가 넘을 때 어디에서 스크롤할지를 먼저 정합니다.

상자 안에서만 움직여야 하는 대화상자라면 최대 높이와 내부 스크롤을 검토할 수 있습니다. 닫기 버튼까지 접근해야 하므로 본문을 잘라 고정 크기에 맞추지 않습니다. 대화상자의 작은 화면 처리와 연결되는 부분입니다.

도구막대와 키보드 변화를 같은 상태로 묶지 않습니다

주소창이 줄어드는 상태, 화면 회전, 글자 확대, 입력 키보드가 열린 상태를 각각 확인합니다. 한 조건에서 아래 버튼이 보였다고 다른 조건까지 같은 결과라고 말하지 않습니다. 브라우저와 기기의 처리 방식, 스크롤 컨테이너가 결과에 영향을 줄 수 있습니다.

가시 높이에 맞춰 요소를 계속 재배치하면 읽던 위치가 바뀔 수 있습니다. 본문은 자연스럽게 늘어나게 하고 행동 영역이 중요한 내용을 덮지 않도록 검토합니다. 화면 아래에 고정한 버튼은 하단 바의 겹침 검사처럼 실제 경계와 본문 공간을 따로 봅니다.

도식의 수치가 아니라 콘텐츠의 조건으로 선택합니다

구성에 따른 선택 질문
화면먼저 정할 것확인할 상태
짧은 첫 소개최소 높이와 내용이 늘어날 경로주소창 펼침·확대
화면형 패널높이 변화에 맞출지 안정적으로 둘지도구막대 변화·회전
긴 안내문문서 흐름과 스크롤문장 추가·큰 글자
입력 화면키보드와 다음 행동 접근입력 중·오류 표시

CSS의 높이 단위는 도구이고, 읽을 내용과 행동을 남기는 것이 선택의 이유입니다. 지원 범위도 대상 환경에서 확인하세요. 큰 높이를 채운 화면 한 장보다 작은 가시 영역과 긴 콘텐츠에서 끝까지 사용할 수 있는지가 더 직접적인 기준입니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문