Every few once in a while, I have end up working on a website page for a site that doesn’t have enough content on it. The site looks great, the content and styles are really working together, but then theres that one page, maybe an archive page that doesn’t have a lot of posts, or the 404 page, or a search results page that doesn’t have enough content to push the footer down to the bottom.
I call this the floating footer problem. It just looks unprofessional to have the footer floating there and have all that white space below it. In the past I’ve position: absolute the footer, but then it flows over the content always, like a navbar.
Here is one solution to fix that:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
padding-bottom: 10em; /* Whatever the height of the footer is */
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}In this example, the main magic happens because the <body> tag is 100%, AND has padding-bottom. That padding on the bottom should be the height of the footer, otherwise content will flow under.
DISCLAIMER: This only works on simple one column footers. If the footer has more than 1 column, then the height will change when sizing down, and then flow over your content. To fix this, adjust the padding on the bottom of the <body> with some well placed media queries. Hopefully that should fix most instances.
And that’s it! The footer should no longer bother us or float up to the middle of the page. Leave me some feed back or suggestions in the comments.