Holy grail layout with 100% height

Question

I am trying to make a css layout that looks like this

The CSS term for this type of layout is known as the "holy grail" I think. The problem I am facing is that when I use layouts and solutions I find online I do not get them to work properly as I want them to. What I am trying to do is make a page that, regardless of content, will have the footer at the bottom of the browser and the columns stretching down to it. So far I have only seen pages that have the footer placed where the content stop, the result is some blank space under the footer.

If anyone could help me out on this it would be greatly appreciated!

Answer 1

See this technique for top/bottom, and just put sidebars in it. Even works in IE6 :p

Answer 2

Use the following for the two sidebars:

padding-bottom:9999px;
margin-bottom:-9999px;

This creates "invisible" content which allows the sidebars to stretch all the way to the bottom (and the negative margin "normalizes" the sidebar dimensions so that calculations carried out on the sidebar still make sense).

Answer 3

This seems to mostly do what you need. http://www.savio.no/examples/three-column-layout-6.asp It uses a faux 100% height column in addition to the three.

Answer 4

In 2017, you can achieve this layout pretty gracefully and easily with flexbox:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  flex: 0 0 100px;
  background-color: #C14F4F;
}
main {
  flex: 1;
  display: flex;
  background-color: #699EBD;
}
footer {
  flex: 0 0 40px;
  background-color: #C14F4F;
}
.left, .right {
  flex: 0 2 150px;
  background-color: #C28282;
}
.middle {
  flex:1 1 300px;
}

<header></header>
<main>
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</main>
<footer></footer>