I have implemented a standard flexbox sticky footer solution in my code:
<body>
<div class="wrapper">
<div class="header">Page Header</div>
<div class="body">
<div class="body1">Page Body 1</div>
<div class="body2">Page Body 2</div>
<div class="body3">Page Body 3</div>
<div class="body4">Page Body 4</div>
<div class="body5">Page Body 5</div>
</div>
<div class="footer">Page Sticky Footer</div>
</div>
</body>
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
}
.body {
flex-grow: 1;
}
While testing on iOS Safari, when scrolling I expected the address bar to minimize but it did not. To achieve this behavior, I can enable scrolling on the root html element, but I am looking for a way to maintain the iOS address bar minimizing functionality while keeping the scrolling within the wrapper container inside the body.
You can test this scenario yourself on an iOS device using the sandbox here: https://codesandbox.io/s/condescending-pascal-r4ntne?file=/styles.css
You can also visit:
to experience this issue firsthand.