Bootstrap - Fill Fluid Container Between Header And Footer

This may be a very simple question, but I've been out of the CSS scene for awhile and I can't seem to figure it out. I am using the Bootstrap framework and I have a fixed header an

Solution 1:

Bootstrap 4 (update 2019)

Now it's easier to get this layout using flexbox.

<bodyclass="d-flex flex-column"><header></header><mainclass="container-fluid flex-fill"></main><footer></footer></body>

body {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

Demo

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won't be needed.

---

Bootstrap 2 (original 2013 answer)

Any parent containers also have to be 100% height (html,body and #wrapper). If you make #wrapper {height:100%} and add 'fill-height' to your container it should work. See here:

http://jsfiddle.net/skelly/NyXkt/4/

#wrapper {
    min-height: 100%!important;
    height: 100%!important;
    margin: 0 auto -33px;
}