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


[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 (-web..


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