모바일 100vh 하단 가려지는 현상 해결

모바일 마크업을 할 때 디바이스 크기에 상관없이 한 화면을 꽉 채우기 위해
height:100vh 를 사용하곤 한다.
그런데 100vh를 사용하고 실제 모바일 브라우저에서 확인해보면 아래 부분이 잘려보인다.

위 이미지는 div.wrap에 height:100vh를 주고
그 안에 section 4개를 각각 height:25%를 준 후 모바일 브라우저(iOS safari)에서
캡쳐한 화면이다.

하단 내비게이션 바 때문에 마지막 4번째 section이 가려진다.

이러한 현상을 해결하려면 100vh로 보여주고 싶은 요소의 height값을
window의 innerHeight 값으로 주면 된다.

document.querySelector(".wrap").style.height = window.innerHeight + "px";

위와 같이 스크립트로 height값을 주면 아래 캡쳐이미지와 같이
내비게이션 바 윗부분까지를 채우게 된다.