height 100vh ios 이슈 해결방법 -webkit-fill-available

CSS

F.E.D 2020. 9. 20. 23:49

body {
  display: flex; 
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

main {
  flex: 1;
}

위와 같이 모바일에서 safari 100vh를 높이로 지정하면 footer가 safari native 툴바에 가려지는 오류가 있습니다.

이를 해결하기 위한 방법입니다.

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

이 코드는 Chrome이 Firefox의 구현과 일치하도록 동작을 업데이트 한다는 안내를 받은 후 html 요소를 포함하도록 업데이트 되었습니다.

-webkit-fill-available이 모든 시나리오에서 작동할까요?

아마 아닐 겁니다. 솔직히 말해서 이건 웹이고 구축하기가 정말 어려울 수 있습니다.

그러나 WebKit에서 100vh에 문제가 있고 CSS 대안을 찾고 있다면 이것을 시도해 볼 수 있습니다.