모바일 웹 앱에서 100vh이 가진 세로 사이즈 문제

📱 모바일 웹 앱에서 100vh이 가진 문제(윈도우창 리사이즈)

안녕하세요 TriplexLab 입니다.
오늘은 모바일 웹 앱에서 100vh이 가진 문제에 대해서 살펴보도록 하겠습니다.

이 글은 아래 글들을 참고했습니다.

Avoid 100vh On Mobile Web

The trick to viewport units on mobile

 

👉문제점

아래 이미지는 제가 현재 블로그 리뉴얼중인 모바일에서의 모습입니다.
이미지에서 빨간 박스부분의 영역까지 스크롤이 내려가지 않아 컨텐츠를 밑에까지 못 보는 문제가 있습니다.

TriplexLab의 블로그 모바일

검색 해보니 원인은 모바일 브라우저에서 100vh는
상단 url을 입력(Browser Top Bar)하는 영역과
하단 네비게이션(Browser Bottom Bar) 영역의 사이즈를 포함하기 때문이었습니다.

그렇다면 내가 원하는 영역인 높이의 사이즈 크기를 어떻게 가져올 수 있을까?
CSS의 사용자 정의 속성과, 자바스크립트로 이를 해결 할 수 있다.

//js

function setScreenSize() {
  //먼저 뷰포트 높이를 얻고 1%를 곱하여 vh 단위 값을 얻습니다.
  let vh = window.innerHeight * 0.01;
  //그런 다음 --vh 사용자 정의 속성의 값을 문서의 루트로 설정합니다.
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setScreenSize();

👉브라우저 사이즈가 변경 될 때마다 자동으로 --vh의 크기 변경 해주기

// js
window.addEventListener('resize', setScreenSize);

📔전체 소스 코드

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

 

/* css */
.area_sidebar {height:calc(var(--vh, 1vh) * 100)}

혹시 var(--vh, 1vh) 라는 것이 생소하실수도 있는데 
이 부분은 여기를 참고하시면 됩니다.

우리의 --vh는 자바스크립트에서 설정을 해주기 때문에 
자바스크립트의 해당 구문이 실행되기 전 까지 --vh를 1vh로 초기 설정을 해 준것 입니다.