100vh ios
-
height 100vh ios 이슈 해결방법 -webkit-fill-availableCSS 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 요소를 포함하도록 업데이..