Menu
I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom.
<div id="footer"></div> I don't want to use
#footer { position:fixed; bottom:0; } AKA Sticky Footer
Is this possible without jQuery?
any suggestions?
705
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section. I will explain few ways to keep or stick the footer to the bottom of the page if there is not enough content.
To make a footer fixed at the bottom of the webpage, you could use position: fixed. < div id = "footer" >This is a footer. This stays at the bottom of the page.
First wrap all of your main content in a div element and give it a class of “wrapper” (or call it whatever you want). Now, make sure you give your footer a height. Then use the calc() function to set the height of your wrapper equal to the height of the viewport (display), minus the height of the footer.
Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .
This Flexbox solution is neater and far easier to implement:
<body> <div class="content"> content </div> <footer class="footer"></footer> </body> html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex: 1 0 auto; } .footer { flex-shrink: 0; } Just ensure you wrap the necessary divs inside the body.
120
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
