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 have 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 of how the markup should look down below

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

Image for post
Image for post
<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 downside is that you have to do 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. 👏 Clap it if you like it. You can learn more about me on my personal website

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store