A truly sticky footer.

In my last job almost all the devs were FullStack and for them CSS was mostly related to put colours to the web but with time you find out that CSS is a bitch.

At the end is quite easy to write styles using the style attribute in your HTML tags or using JS but if you do that probably is because you don't really know CSS, now I really respect CSS. :)

When doing a website you probably want the <footer> element sticked at the bottom, that's not a problem if you have a lot of content but the issue comes when you don't have enough content to fill up the page. Then your <footer> will be hanging wherever finishes your content

After several times of trying to resolve this issue I have found a way that until now is working for me.

To make it work we have to apply styles to three different elements on the page, the <html> tag, the container that holds your content and the <footer> tag.

Styles for the <html> tag:

html {
  min-height: 100%;
  position: relative;
}

Styles for the <footer> tag:

footer {
  bottom: 0;
  height: 100px; /* value that you need */
  position: absolute;
  width: 100%
}

An for the container basically what we need to do is to apply the same height that has the footer as a margin bottom. It would be wise to add some extra pixels so the content is not next to the footer.

.container {
  margin-bottom: 120px;
}

See the Pen pdNoPR by Albert (@byverdu) on CodePen.

comments powered by Disqus