사파리의 vh

vh란 viewport height로 브라우저의 높이에 따라 상대적으로 적용되는 단위이다. 

예를들어서 화면의 높이가 100px이라면 1vh는 1px이다. 

 

하지만 사파리에서는 상단의 url바와 하단에 있는 네비게이션바로 인해서 100vh를 설정해도 

화면이 잘려버리는 문제, 혹은 스크롤리 생겨버리는 문제가 발생한다. 

 

해결 방법 

-webkit-fill-available 프로퍼티로 해결할 수 있다. 

body {
  min-height: 100vh;
}

/* iOS only */
@supports (-webkit-touch-callout: none) { 
  height: -webkit-fill-available;
}