[CSS] 모바일을 고려한 스크롤 없는 height 100%

css를 쓰다보면 height: 100% 가 생각보다 정확하게 작동하지 않는다는 걸 깨닫는다.

그래서 vw,vh(viewport 기준 단위)가 나왔을 때 잘 사용했지만 이 역시 모바일에서 완벽한 높이를 불러오지 않는다.

 

왜냐하면 모바일 브라우저에서 가지는 주소창 높이나 혹은 아래 버튼 영역의 높이가 있기 때문이다.

이런 부분까지 고려해 height값을 가지고 와야만 한다.

 

먼저 JS에 이렇게 css의 변수를 설정한다. 

let vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)

 

 

그 후 css에 이런 식으로 적용하면 된다.

.my-element {
  height: 100vh; /* css var()을 지원하지 않을 경우 그냥 100vh로 나와라. */
  height: calc(var(--vh, 1vh) * 100);
}

 

 

단, 모바일 브라우저는 스크롤이나 터치 시 주소창이 있다가 없었다 하기에 그 부분이 걸린다면 resize 를 추가하면 화면 크기가 바뀔 때마다 --vh값을 다시 가져온다.

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

 

 

 

 

참고 사이트 : https://css-tricks.com/the-trick-to-viewport-units-on-mobile

The trick to viewport units on mobile | CSS-Tricks