How to set a bootstrap 3 container to 100% of browser height with a sticky footer?

Question

Like the title says, how do I set a bootstrap 3 container (wrapper) to 100% of the height of a browser window using a sticky footer?

UPDATE:

the sticky footer works fine, it's the first '<div class="container">' that I need to be 100% height

possibly previously answered? http://stackoverflow.com/search?q=bootstrap+sticky+footer — blurfus, Jan 02 '15 at 20:54
possible duplicate of [Twitter Bootstrap 3 Sticky Footer](http://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer) — blurfus, Jan 02 '15 at 20:56
I updated my question - maybe it wasn't clear enough. the sticky footer is fine ~ it's the container I need 100% height. — Sean Kimball, Jan 02 '15 at 21:34
This is good working example: http://www.bootply.com/panchroma/70755 — Carol Skelly, Jan 03 '15 at 19:48
This is not a previously answered question, the issue isn't with the footer, its with the container div needing to be 100% height. — Sean Kimball, Jan 04 '15 at 21:44

score 1 · Answer 1 · edited Jan 02 '15 at 21:03

1

You can set the page height to 100% and then put the footer at the bottom with a margin of it's height.

Start by adding this to your css:

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

And for the footer add this

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

edited Jan 02 '15 at 21:03

ckuijjer

answered Jan 02 '15 at 20:17

Cisum Inas

1

This addresses the sticky footer - which works, the question was about setting a container's height, if you take a look at the bootply example, it's the first container that I need to be 100% height. – Sean Kimball Jan 04 '15 at 21:41

1 Answers1