Sticky footer with variable height in bootstrap

Question

I am trying to get a sticky footer with a custom height on my website and it is proving far more difficult then I had anticipated.

Here is a screen shot of my footer at the moment:

The footer is covering my contact form because I have explicitly set a height of 419 px.

On a page where the content is shorter then the screen the footer sticks to the bottom fine... but only because I have explicitly set the height.

Here is my CSS and HTML:

How do I make the footer stick to the bottom of the page a). without it overlapping onto my content and b). without having to explicitly set the height of the footer.

Answer 1

In your case I would recommend to use Flexbox. One big advantage of using Flexbox is that you don't need to set a specific height to the footer anymore.

You can simply achieve what you want just by changing your CSS to the following

html, body {
  height: 100%;
}

body {
  background: #ffffff;
  display: flex;
  flex-flow: column;
}

footer {
  margin-top: auto;
  background-color: #222;
}