[JS] 모바일 브라우저에서 주소창을 고려한 높이값 계산법

css 변수에 자바스크립트로 innerHeight 값을 할당해준다.

var vh;
setVh();
window.addEventListener( "resize", setVh );
function setVh() {
  vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty( "--vh", vh+"px" );
}

vh라는 변수를 하나 선언해준다.

setVh라는 함수를 하나 만들어주고 바로 호출을 해준다.

함수에서는 아래 두가지 명령을 수행해준다.

1. vh 변수에 innerHeight 값의 100분의 1에 해당하는 값을 할당해준다.
2. CSS :root 위치에 –vh라는 변수를 만들어주고위에서 구한 vh를 넣어준다.
   (:root위치는 자바스크립트에서 document에 해당되며 값을 넣을 때엔 뒤에 px을 붙여준다.)

그리고 창 크기가 변경될 때 마다 함수를 호출해서 vh값을 갱신해주면 끝.