Javascript
[Javascript] ios 사파리에서 CSS 100vh 높이가 제대로 적용되지 않을 때
- 2024.08.28 15:18:16
 ios 사파리의 경우 100vh 높이가 더 크게 표현되는 오류가 있다. 실제 브라우저 height 만큼 100vh가 인식되도록 하기 위해 javascript로 css 변수를 만들어주면 제대로 표현 가능하다. [!]javascript로 100vh 변수 생성하기[/!] CSS에서 사용할 수 있도록 브라우저 높이를 계산하여 변수로 전달한다. // ios 에서 100vh 계산 위한 변수 생성
function setDynamicHeight() { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } // 초기 실행 및 창 크기 변경 시 업데이트 setDynamicHeight(); window.addEventListener('resize', setDynamicHeight); [!]CSS 에서 변수 사용하여 100vh 표현하기[/!] 아래와 같이 javscript로 만든 --vh 를 활용할 수 있다. max-height: calc(var(--vh, 1vh) * 100 - 170px);
|