100vh가 적용 안되는 이유

• 모바일에서 상단에 위치한 url바와 하단 네비게이션바로 인한 문제
• ios safari ➡️상단 노치와 url바, 네비게이션바로 인해 vh를 window.innerHeight보다 크게 잡음

해결법

1. js + css 로 수정

   화면이 처음 렌더링 되었을 때 vh를 window.innerHeight*0.01 에 맞추어 세팅되도록 선언

   useEffect(() => {
     const vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
   }, []);
   

   height: calc(var(--vh, 1vh) * 100); // 실제 사용법
   

   브라우저 resize 고려할 경우

   const setVh = () => {
     document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`)
   };
   window.addEventListener('resize', setVh);
   setVh();
   

   :root {
      --vh: 100%;
   }
   
   html,
   body {
       height: 100vh;
       height: var(--vh);
   }
   

2. css 로 수정

   height: 100vh;
   height: -moz-available;
   height: -webkit-fill-available;
   height: fill-available;
   

새롭게 추가된 css vh

• 최근 추가된 기능들은 일부 브라우저 버전에서 동작❌ 가능성 ➡️ 확인 필수❗

Error | 모바일 브라우저에서 100vh 적용 오류 해결 (ios/android)

[React] 모바일 웹 100vh 스크롤 버그 + tailwind 적용법