[CSS] dvh (Dynamic Viewport Height)

영역의 높이를 뷰포트 높이를 잡을 때 쓰는 vh에 대해 알아보자🤔

---

vh(Viewport Height)란?

말 그대로 Viewport의 높이를 말하며 높이 단위로 사용된다.

Viewport는 현재 보이는 화면 영역을 의미하는데 웹 브라우저 상으로는 UI, 메뉴 바 등을 제외한 브라우저 창의 영역을 말한다.

vh를 사용하면서 발생한 문제점과 해결 방법을 정리해봤다✍

---

문제점😓

• 100vh로 높이 값을 설정했으나 모바일 주소 표시줄 영역에 의해서 화면이 잘리는 경우가 발생함

PC에서는 뷰포트 높이에 맞게 잘보이던 영역이 모바일로 보니까 잘리는 현상이 생겼다.
(모바일기기별로 주소 표시줄 높이가 다르기때문에 그 높이만큼 잘림)

.box {
	height:100vh;
    height:-webkit-fill-available;
}

위 방법이 있다는데 ios에서만 적용이 되고 안드로이드에서는 적용되지않기때문에 권장하진 않는다고 한다.

해결😊

이런 문제를 해결하기위해 대체할 수 있는 단위가 등장했다고 한다.

이미지 출저: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

dvh (Dynamic Viewport Height)

• Viewport 사이즈 변화에 따라서 동적으로 변화하는 단위 (dvw도 있음)

.box {
	height:100dvh;
}

주소 표시줄이 스크롤을 통해 축소 또는 노출되던지 상관 없이 현재 보여지는 뷰포트 높이를 동적으로 가져온다👍
(위 이미지처럼 주소 표시줄의 유무에 따라 달라짐)

svh (Short Viewport Height) & lvh (Large Viewport Height)

• svh는 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져오며, 주소 표시줄이 없어져도 기존 주소표시줄의 높이 값을 뺀 나머지 값을 가져온다.
• lvh는 svh와는 반대로 사용자 화면 기준으로 가장 긴 뷰표트 값을 가져오며, 주소 표시줄이 있더라도 주소 표시줄이 없을 때의 총 화면의 길이를 가져온다.

.box {
	height:100svh;
}

-------------------

.box {
	height:100lvh;
}

---

주의😫

브라우저 하위 버전에서는 제공되지 않기때문에 호환성 확인이 꼭 필요하다.

• 대부분의 최신 브라우저 (22년 중순 ~ 말 출시)에서는 지원O
• 구형 브라우저 (22년 중순 이전 출시)에서는 지원X

[2024기준 Can I use]

개인적으로 확인해봤을 때, 파이어폭스나 예전 버전의 브라우저들에서 dvh가 적용되지 않는 것을 확인했다.
그럴 경우, 대안으로👇

.box {
	height:100vh;
	height:100dvh;
}

위처럼 vh를 써준 후 dvh를 써줘서, dvh가 적용되지 않을시 vh가 적용되도록 해주었다.
(나중에 다른 방안을 알게되거나 더 좋은게 생기면 수정✍)