How to set loading container 3 to 100% browser height with sticky footer?

Question

Like the header, how do I set the wrapper to 100% of the browser window height using a sticky footer?

UPDATE:

the sticky footer works great, this is the first '<div class="container">'

thing I need to be 100% high

+3

Sean kimball 02 jan. 15 at 20:14

1 answer

Cisum inas · Answer 1 · 2015-01-02T20:17:07+0000

You can set the page height to 100% and then put the footer at the bottom with a difference in 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;
}