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 대안을 찾고 있다면 이것을 시도해 볼 수 있습니다.
출처 : allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
'CSS' 카테고리의 다른 글
clamp() 사용하기 (0) | 2020.10.11 |
---|---|
사용자 정의 속성 사용 custom properties (Global CSS ) (0) | 2020.09.21 |
Css에서 line-height를 조정하는 방법 (0) | 2020.09.20 |
[Modern CSS] 동일한 높이 만들기 Flex vs Grid (0) | 2020.09.13 |
웹 애니메이션에 대한 기본 규칙 (0) | 2020.09.08 |
댓글