vh란? #

vh는 viewport height에 해당하는 단위로 해당 브라우저의 높이에 따라서 상대적으로 적용되는 단위이다. vh와 함께 사용하는 단위로 vw(viewport width)가 있다.

이슈사항 #

브라우저 크기에 맞게 100vh를 사용했을 때, 모바일에서 상하단에 위치한 url, navigation으로 인해 화면이 잘리는 현상이 발생한다.

height: 100vh;

원인 #

url바는 상황에 따라 보여지거나 없어지는 경우가 있다. url바가 가변할 수 있는 데에 비해서, 100vh는 그에 따라 다시 측정되지 않는다. ios safari 브라우저의 경우, 상단의 노치와 url바 혹은 하단의 툴바로 인해 화면의 크기(viewport)를 실제 보여지는 윈도우 innerHeight보다 크게 잡는다. 그래서 document의 height을 100vh로 잡아 작성하더라도 실제 safari 모바일 화면에서는 스크롤바가 생긴다.

해결 #

자바스크립트를 이용해 문제 해결이 가능하다. 자바스크립트로 document의 스타일에 —vh라는 property를 만들어주고 window가 resize 될 때마다 —vh property를 변경해주도록 아래와 같이 작성하면 올바르게 화면에 보이는 것을 확인할 수 있다.

Javascript

<script>
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', vh + 'px');
window.addEventListener('resize', function () {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', vh + 'px');
});
</script>

CSS

<style>
body {
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}
</style>