문제의 상황 및 요구사항
전체 화면 높이를 차지하도록 요소의 스타일을 지정하려면 높이를 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));
참고 및 참조