[CSS] mobile address bar 포함하여 100vh 적용하기 + React, SCSS

[ 문제점 ]

일반적으로 css 에서 100vh를 사용하면 데스크탑에서는 문제가 되지 않는다. 그냥 창 전체 크기로 알아서 맞추어 주지만, 모바일에서는 url 주소창이 있기 때문에 문제가 생긴다. 주소창의 형태와 크기는 safari, chrome 에 따라 다르고, 버전에 따라서도 다르기 때문에 각각의 경우를 나누어서 계산하기는 힘들다.

 

[ 해결 방법 ]

 찾아보니 CSS에서

height: -webkit-fill-available;
height: fill-acaiable;

이런저런 속성들이 있다고 했다. 그래서 적용시켜보니 safari에서는 돌아가는데 chrome에서는 또 적용이 안되는 오류가 있었다. 그래서 chrome에서는 또 따로 분기를 나누어서 처리하고 하려고 하다가 다음과 같은 방법을 발견하고 해결하였다.

 

window의 innerHeight를 js에서 구하고, 이를 css의 property로 정의하여서 css에서도 사용할 수 있게하는 방법이다.

  const [heightSize, setHeightSize] = useState<number>(0);
  useEffect(() => {
    const handleResize = () => {
      setHeightSize(window.innerHeight);
    };
    
    handleResize();
    window.addEventListener("resize", handleResize);
    
    const root = document.documentElement;
    root.style.setProperty("--1000vh", `${heightSize}px`);
    
    return () => window.removeEventListener("resize", handleResize);
  }, [heightSize]);

위 코드를 react나 Nextjs의 index 부분에 적용하면 CSS 에서 var(--100vh)로 사용할 수 있게된다. 위 방법대로 하면 scss의 calc도 다음과 같이 사용할 수 있다.

min-height: var(--100vh);
height: calc(var(--100vh) - 50px);