DEV Community

Discussion on: 100vh problem with iOS Safari

View post
Collapse
 
fabiogiolito profile image
Fabio Giolito •

My approach is to disable the show/hide of the safari bars by preventing the body from scrolling. That way the content area height is constant.

<body>
    <div class="app">...</div>
</body>
Enter fullscreen mode Exit fullscreen mode 
body {
    height: 100vh;
    height: -webkit-fill-available;
    overflow: hidden;
}
.app {
    height: 100%;
    overflow: auto;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
maciejtrzcinski profile image
Maciej Trzciński 🌱🇵🇱 •

Hi, It will work, but you have to remember about for example scrollTo and #anchors in this solution.