모바일 100vh 잘림은 풀스크린 히어로나 하단 고정 버튼을 만들 때 자주 겪는 문제입니다. 아이폰·안드로이드 주소창 높이가 변하는데도 100vh는 그 변화를 반영하지 않아, 화면 밖으로 버튼이 밀려 나갑니다.
지금은 dvh·svh로 실제 보이는 높이에 맞출 수 있고, 예전 vh는 폴백으로만 남겨 두면 됩니다. 예전에 JS로 창 높이를 재던 방식보다 유지보수가 훨씬 가볍습니다.

1. svh, lvh, dvh 차이부터 정리

세 단위는 모두 '뷰포트 높이의 1%'지만, 주소창을 어떻게 가정하느냐가 다릅니다. 고객사 랜딩을 손볼 때는 용도별로 골라 쓰는 편이 안전합니다. lvh는 예전 vh와 비슷한 큰 높이이고, svh는 주소창이 다 보이는 작은 높이, dvh는 지금 보이는 높이입니다.

2. 히어로·풀스크린에 쓰는 실무 패턴

지원하지 않는 오래된 브라우저를 위해 vh를 먼저 쓰고, 그다음 줄에 dvh나 svh를 덮어씁니다. 첫 화면 히어로는 잘림을 막으려면 100svh가 더 안전한 경우가 많고, 스크롤에 맞춰 계속 맞추려면 100dvh를 씁니다. 하단 고정 CTA 바는 bottom: 0과 함께 safe-area까지 챙기는 편이 좋습니다.

/* 풀스크린 히어로 — 폴백 후 덮어쓰기 */
.hero {
  min-height: 100vh;   /* 구형 브라우저 */
  min-height: 100svh;  /* 첫 화면 잘림 방지 */
}

/* 현재 보이는 높이에 맞출 때 */
.sheet {
  height: 100vh;
  height: 100dvh;
}

크롬 108, 사파리 15.4, 파이어폭스 101부터 지원합니다. 그 이전 브라우저는 위의 100vh 줄만 적용되므로, 예전과 같은 수준으로라도 동작합니다. 아이폰은 iOS 15.4 이후면 사파리뿐 아니라 다른 브라우저에도 같이 적용됩니다.

3. 하단 고정 버튼과 같이 쓸 때

풀스크린 영역 안에 하단 고정 버튼을 넣는 구조라면, 바깥은 min-height: 100svh로 잡고 버튼은 position: sticky나 일반 플로우로 두는 편이 덜 꼬입니다. 전체를 100dvh 박스 하나로 감싼 뒤 그 안에 position: fixed 버튼을 또 넣으면, 주소창이 움직일 때마다 겹침이 다시 생길 수 있습니다.

/* 바깥은 안정적인 svh, 안은 일반 배치 */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.page .cta {
  margin-top: auto; /* 아래로 밀기 */
  padding-bottom:
    env(safe-area-inset-bottom);
}

4. dvh를 쓸 때 조심할 점

dvh는 주소창이 접히고 펴질 때마다 높이가 바뀝니다. 히어로 안에 큰 이미지나 스크롤 스냅이 있으면 레이아웃이 살짝 출렁일 수 있으니, '지금 화면에 딱 맞춰야 하는 패널'에만 쓰고 본문 전체에는 svh나 일반 흐름을 유지하는 편이 낫습니다.

또 하나, 가상 키보드(입력창 키보드)는 이 단위 계산에 보통 들어가지 않습니다. 문의 폼처럼 키보드가 올라오는 화면은 dvh만으로 해결되지 않는 경우가 있으니, 입력 중 잘림이 보이면 별도로 확인하세요. 실무에서는 아이폰 사파리와 안드로이드 크롬 두 대에서 주소창을 올리고 내린 뒤 하단 버튼이 보이는지 확인하면 충분합니다.