-webkit-fill-available

iOS의 사파리에선 100vh 속성 값이 다소 다르게 작동한다. 데스크탑 크롬에서 100vh는 현재 화면에 보여지는 뷰포트를 기준으로 하지만, iOS의 사파리에선 하단 주소창 영역까지 포함한다. 뷰포트를 기준으로 아래 비율로 화면을 나눴다면 아이폰 사파리에선 footer 일부분은 하단 주소창 때문에 가려진다.header : 15%main : 70%footer : 15% 해결 방법다행히 이 문제는 순수 CSS만으로 해결할 수 있다. -webkit-fill-available 속성을 이용하는 방법이다. 기능 쿼리(@supports) 인자에 명시한 -webkit-touch-callout은 iOS에서만 지원하는 속성이다. 따라서 아이폰 사파리에서 접속할 땐 -webkit-fill-available 스타일 값이 적..