[CSS] iOS에서 height: 100vh 사용시 스크롤이 생기는 이슈

iOS에서 상단의 노치와 url바 혹은 하단의 툴바로 인해 화면의 크기를 실제 보여지는 innerHeight 보다 크게 잡습니다. 그래서 document 의 height 를 100vh 로 잡아 작성하더라도 실제 iOS에서는 스크롤바가 생깁니다. 해당 이슈는 아래의 방법들로 해결할 수 있습니다.

dvh 사용

dvh 는 현재 viewport 높이를 나타내는 동적인 값으로, 만약 주소표시줄이 축소된 상태에서 스크롤을 통해 주소표시줄이 확장되면 dvh 의 값도 업데이트됩니다.

body {
  height: 100dvh;
}

-webkit-fill-available 사용

-webkit-fill-available 이 속성은 지원하지 않는 브라우저가 있기 때문에 iOS 환경에서만 적용되도록 @supports (-webkit-touch-callout: none) 를 사용해줍니다.

body {
  height: 100vh;
}

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

 

해당 포스팅은 이 글을 참고하여 작성했습니다.