모바일 100vh에 꽉차게 퍼블리싱 / 모바일 100vh 스크롤 생기는 문제

* 스크롤 페이지가 아닌, 100vh의 컨텐츠만 있는 페이지 작업

 

js에 아래 함수 추가한다.

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

 

감싸는 wrap에 아래 css를 반영한다. 그러면 모바일 100vh에 스크롤이 생기지 않아서 깔끔한 화면을 만들 수 있따.

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