Full Height On mobile Web

문제의 상황 및 요구사항

전체 화면 높이를 차지하도록 요소의 스타일을 지정하려면 높이를 100vh로 설정하면된다. 하지만 예상되로 되지 않는 것을 경험할 것이다. 웹 브라우저에 기본적으로 보이는 주소 줄까지 높이로 계산해, 가려진 영역 때문에 스크롤이 발생한다.

해결 방안

사용자 정의 vh 사용 (CSS 변수)

window.innerHeight를 사용하여 CSS 변수 —vh를 설정한다.

// 1)
window.addEventListener('resize', () => { 
  document.querySelector(':root').style
    .setProperty('--vh', window.innerHeight/100 + 'px');
})

// 2)
const vh = window.innerHeight * 0.01;
this.elementRef.nativeElement.style.setProperty('--vh', `${vh}px`);

이제 전 영역에서 —vh를 사용할 수 있다.

min-height: calc(100vh - #{$edge-height});
min-height: calc(var(--vh, 1vh) * 100 - #{$edge-height});

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

참고 및 참조

• Mobile issue with 100vh | height: 100% !== 100vh [3 solutions]