Menu
I am building an app and I would like to have a navbar stuck to the bottom of the browser. I have something like
<div style="display: flex; flex-direction: column; height: 100%"
<header>Header</header>
<section style="height: 100%">Main Content</section>
<footer>Sticky footer</footer>
<div>
This works great for desktop. Here is a simple example where red is header, yellow is footer, blue is content.
However, in iOS Safari (and some Android browsers I think too) when you scroll, there bottom 44px or so is covered by the toolbar.
I read here and some others about workarounds, but no real "good" solution. However, is seems Instagram's website on iOS solved this:
Without scrolling:
When you scroll the bottom nav repositions above the toolbar nicely:
One solution is just make the toolbar always visible, but I would like to take the Instagram style approach. I am not sure how to implement in CSS (or CSS + JS). Does anyone know how I can achieve the Instagram effect? The bottom navbar wrt to the Safari iOS toolbar moves seemlessly when you scroll.
Edit: here is the working demo that solves this problem.
<!DOCTYPE html>
<html style="height:100%"lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="height:100%; padding: 0; margin: 0">
<div style="display: flex; flex-direction: column; height: 100%">
<header>Header</header>
<div>
<div>Main content</div>
</div>
<footer style="position: fixed; bottom: 0; width: 100%">Sticky footer</footer>
</div>
</body>
</html>
984
Have you tried:
footer {
position: fixed;
bottom: 0;
z-index: 10; /** this value affects the overlapping **/
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
