Menu
I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall enough to fill the viewable area (i.e. there's no scrolling).
823
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.
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.
If you wrap the content in a tag and set the margin-bottom value to the same as the footer-height, you would be able to read the text that the footer was originally covering.
Your issue can be easily fixed by using flexbox. 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.
.flex-wrapper { display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; }<div class="flex-wrapper"> <div class="container">The content</div> <div class="footer">The Footer</div> </div>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