Keep that damn footer at the bottom

The easy way


The Problem

“When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately obvious how this can be done.”

Following up on How to keep footers at the bottom of the page by Matthew James. I figured out that there’s a much easier way to do that technique using Viewport units. Also when using older techniques with for example landing pages that has full height sections it kind of gets in the way and ruins the whole page but this way doesn’t, so let’s get into it.

The markup

Representation to how the markup should look down below

markup representation

.main-container and footer are all what matters in this case and it goes as follows:

<div class=”main-container”>
 <header>
this is a header
</header>
 <section>
this is content
</section>
 <footer>
this is a footer
</footer>
</div> <!-— /.main-container-->

The styling

The header and your content are irrelevant to make the footer stick at the bottom in styling, so I’m just gonna write what’s necessary for keeping your footer always at the bottom

* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
position: relative;
}
.main-container {
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}

Advantages:

  • Pure HTML and CSS
  • No JavaScript
  • Works on Modern browsers and mobile browsers as well. Check Viewport units support here on caniuse.com
  • The only down side is that you have to do a padding that equals the height of your footer.

I also prepared a demo. You can grab it from here.

I hope that my small tip was helpful to you guys and your feedback is more than welcome.


Thanks for reading. Please recommend it if you like it :)

I’m zero & I design early stage startups @hackquarters. Product Designer & writer. Check out my website and portfolio