모바일 100vh 오류 해결

이벤트페이지를 작업하면서 높이값을 100vh로 설정했을 때 모바일에서 접속시 스크롤이 생기는 이슈가 발생했다.

 

검색창을 인식하지못해서 그런거라 script로 innerHeight 값을 구해, css에 root 변수로 설정해주었다.

그냥 봤을땐 문제가 없어보였는데 테스트 중, 갤럭시탭에서 가로모드를 이용하다가 세로모드로 돌아왔을 때 높이값이 제대로 반영되지않는 이슈가 발견됐다..

 

오픈시간도 얼마 안남아있어 너무 당황스러웠지만 다행히 이전에 계속 담당하시던 사수분께서 같은 이슈를 겪었던 경험이 있어 쉽게 해결할 수 있었다.

 

굳이 script를 사용하지않고 html, body에 'height: 100%'를 설정해주면 끝

 

이렇게 간단하게 해결되다니 약간 허탈했다.

그리고 이런 간단한 방법이 있는데 구글에는 왜 죄다 스크립트를 이용한 방법만 나오는건지 의문..