Menu
I made the following sticky footer using CSS. The bottom page content is currently hidden behind the footer (see the attached screenshot). How can I adjust my CSS so that all of the body content is visible and the footer remains stuck to the bottom of the browser window? Thank you!
CSS:
.fo { position: absolute; left: 0; bottom: 0; height:65px; width: 100%; color: #eaeaea; margin-left: -8px; } 
905
Just wrap your . container and your . footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom.
The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.
The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.
You can create a clear div and give it a height.
.clear { clear: both; height: 60px; } <div class="clear"></div> <div id="footer">FOOTER CONTENT</div> Height being whatever you need to keep content above the footer, eg. taller than the footer. If the footer is 50px; tall, I do 60px; for the height in the clear div. So when I scroll, the footer stays in place but as I get to the bottom the content that is flowing from behind the footer has room to get pushed above the footer without being covered. Super simple, and it worked perfectly.
86
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
