CODEWITHSUNDEEP
csstwitter-bootstrap-3
Sean Kimball
Sean Kimball

Reputation: 4494

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

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?

BootPly

UPDATE:

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

Upvotes: 3

Views: 826

Answers (1)

Cisum Inas
Cisum Inas

Reputation: 12990

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

Like done here: http://getbootstrap.com/examples/sticky-footer-navbar/

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;
}

Upvotes: 1

Related Questions