모바일 100vh 오류 해결방법

발생 오류

화면을 가득채우는 팝업페이지를 구현해야해서 높이값으로 100vh를 설정해주었다.
PC에서는 문제가 없었지만 모바일에서 확인해보니 스크롤이 생기는 문제가 발생했다.

이유는 모바일 브라우저에서 100vh는 상단 주소창 영역과 하단 네비게이션바 영역을 포함하기 때문이었다.

해결 방법

1. 스크립트를 이용해 스크린 높이값을 구해준 뒤 css에 넣어주는 방식을 이용했다.

//script
funciton setScreenSize() {
  let vh = window.innerHeight * 0.01;

  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

setScreenSize();

//css
height: calc(var(--vh, 1vh) * 100);

또다른 오류

문제가 해결된 줄 알았지만 테스트과정에서 갤럭시탭 가로모드 -> 세로모드 변환시 높이가 정상적으로 돌아오지 않는 문제가 발생했다.

해결방법

2. html, body, body 내부의 가장 상위 태그 에 'height: 100%' 속성을 넣어주었다.

//css
html,body{
	height: 100%;
}
wrapper{
	height: 100%;
}

굳이 스크립트를 사용하지않아도 css만으로 간단히 해결이 가능한 문제였다.
오히려 스크립트를 사용했을 때 오류가 있었던 반면, 스크립트 대신 css를 사용했을땐 다른 오류가 발견되지 않았다.
html, css에 대해 쉽게 생각했었는데 일을 하다보니 기본적인 것들이 얼마나 중요한지 깨달아가고 있다.