모바일에서 브라우저 주소창을 고려한 css height 설정 - svh

서비스 이용 시 위아래 스크롤이 되지 않도록 하고 싶었다.

하지만 별이 떠다니는 애니메이션이 상당한 height를 차지하고 있었다.

 

 

이것들을 정리하기엔 쉽지 않다고 생각하여 레이아웃의 크기를 viewport에 맞추기로 결정했다.

 

  height: calc(100vh - 55px);  // 55px은 헤더의 높이

위 코드를 적용한 후 데스크탑에서는 더 이상 스크롤이 생기지 않았지만,

 

IOS 사파리에서 동일한 증상이 반복되었다. (네이버 브라우저에서 정상 작동하는 것을 확인하고, 다른 브라우저를 확인해보지는 않았다.)

 

하단의 주소창 때문에 의도대로 동작하지 않고 있다.

 

주소창을 고려한 높이 설정을 위해 구글링하다 발견한 아래 방법도 사용해 봤지만 해결되지 않았다.

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

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

https://css-tricks.com/the-trick-to-viewport-units-on-mobile 

 

도저히 해결되지 않아 실력있는 지인한테 물어봤다.

 

 

  height: calc(100svh - 55px);

 

vh대신 svh로 viewport의 길이를 계산하자 정상적으로 동작하기 시작했다.

 

css에 svh라는 속성이 있다는 것을 처음 알게 되었는데, 

모바일 브라우저에서 주소창을 고려할 때 사용하기 좋은 속성인 것 같다.

 

svh에 대해 더 자세히 알아보기 위해 MDN문서를 찾았지만 브라우저 호환성에서만 그 단어를 찾을 수 있었다.