모바일 100vh 스크롤 문제

모바일 화면에서 전체 화면을 만들기위해 100vh를 사용했다. 스크롤이 생기지 않았으면 하는
화면을 만들때 크롬 브라우저 관리자 화면으로 확인할때는 이상이 없었는데 모바일 브라우저(카카오 인앱 브라우저, 네이버, 사파리)등을 사용할 때 문제가 생겼다.

문제해결전

나는 내가만든 상단헤더바와 인앱브라우저 top bar , bottom bar를 제외한 영역에만 컨텐츠를 표시하고 싶었다. 현재 12345 무지개로 표시된 영역은 heigt:20% 으로 지정해 놓았다.

20%씩 높이를 차지하지만 밑에부분이 짤리고 있으며 스크롤이 생겼다.

또한 카카오 인앱브라우저는 top bar , bottom bar의 사이즈가 변하기 때문에 대응해주어야 했다.

문제를 해결하기위해 자바스크립트와 css를 사용하였다.

javascript

    <script>
      const vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty("--vh", `${vh}px`);

      window.addEventListener("resize", () => {
        let vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty("--vh", `${vh}px`);
      });
      window.addEventListener("touchend", () => {
        let vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty("--vh", `${vh}px`);
      });
    </script>

css

css부분은 아래와 같이 해주었다.
--vh는 자바스크립트가 실행되기 전 --vh를 1vh로 설정을 해 주며 -60px는 상단 헤더바가 차지하는 높이만큼 -해주었다.

height: calc(var(--vh, 1vh) * 100 - 60px);

문제해결후

스크롤이 없어지고 내가 원하는 영역 안에서만 높이를 20%씩 차지하고있다.

참고 링크  : https://css-tricks.com/the-trick-to-viewport-units-on-mobile/