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).
Html – How to push a footer to the bottom of page when content is short or missing
csshtml
Related Topic
- Html – How to align content of a div to the bottom
- CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
- Javascript – How to modify the URL without reloading the page
- Css – How to use HTML to print header and footer on every printed page of a document
- Html – Make body have 100% of the browser height
- Css – Make div stay at bottom of page’s content all the time even when there are scrollbars
Best Answer
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.