ios 사파리, 크롬 heigth: 100vh 안될 때 (feat. 이것이 크로스 브라우징인가)

기획자로 일하면서 QA를 여러 차례할 땐 당연하듯 하던 브라우저 별 테스트가 이젠 내가 개발자로 코드치면서는 잊고 있었다 😅 사실 어렴풋이 해야지는 생각했는데 당장 개발 작업이 바쁘니깐 일단 넘겼더니 결국..! 배포 전 테스트 때 화면 레이아웃이 일부 깨졌다 😱 

진짜 ios..... 왜 안되는 지.... 한참 구글링 해서 해결한 오늘의 주제...! ios 사파리, 크롬 heigth: 100vh 안될 때의 문제 해결방법을 미래의 나를 위해 기록한다.

 

이슈

iOS 기기 브라우저에서 100vh 를 브라우저의 도구바 영역까지 잡고 있다고 한다. 그래서 하단에 버튼과 같은 무언가 배치하면 가려서 안보이는 현상이 나타난다.

 

해결방법

구글링을 해보니 방법은 이러하다. 실제 innerHeight 값을 기준으로 css calc를 이용하면 끝. 아래의 코드를 작성하자.

// js 코드
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty(`--vh`, `${vh}`);


// css 코드
.main-section {
	height: calc(var(--vh, 1vh) * 100);
}