[CSS] IOS 100vh 스크롤 문제

문제

height: 100vh 사용시 모바일 IOS에서 (+인앱브라우저) 스크롤이 생기는 문제

 

원인

100vh에 하단 바의 높이까지 포함시켜서 더 크게 인식함

 

사용이유

body에 100% 를 상속받아 내려오는 케이스를 제외하고, 컨텐츠 영역에서 불가피하게 최상단 레이아웃에 flexbox를 사용해야할 때가 있다. 또는.. 별도의 각종 레이아웃 컴포넌트(헤더,푸터)를 제외한 영역을 100%로 잡아야 할 때 페이지별로 vh 속성을 쓰는게 깔끔할 때. 등등 많은 케이스에서 vh가 요구된다.

 

CSS

height: 100vh;// css property 지원 안하는 브라우저 대비용
height: calc(var(--vh, 1vh) * 100);

 

JS

 useEffect(() => {
    // css property 사용하여 ios 모바일에서 스크롤 생기는 문제 해결
    let 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`);
    });
  });

Android, IOS 분기처리가 필요없이 깔끔하고 매우 유용하다.
기록해둬야겠다.

CSS Variables syntax

:root {
  --primary: #ff0000;
}

body { background-color: var(--primary); }

var(--name, value)
--name은 필수값이고, value는 fallback 옵션값이다. 

 

출처 : 미디엄