jQuery Setting Container and Footer Heights

Question

I am using $(".container").height($(document).height()); to set my container 100% height but I was wanting to know is there a way to adapt the above line so that it places my footer at the bottom?

I am trying to work this in with TBS

There are several strategies for having your footer sit at the bottom.. Google sticky footer css. — lucuma, Jun 13 '12 at 12:08
You can do that with plain css, i posted an answer to a question like this before, [Flushing footer to bottom of the page, twitter bootstrap](http://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap/10107793#10107793), is this what you're looking for? — Andres I Perez, Jun 13 '12 at 12:41

score 3 · Accepted Answer · answered Jun 14 '12 at 12:08

The trick is to get the footer to stick to the bottom is creating a .wrapper class to contain your main content area, thus separating both main container and footer. Something like this:

HTML

<div class="navbar navbar-fixed-top">
  ... fixed navbar ...
</div>

<div class="wrapper">
    <div class="container">
      ... main content area ...
    </div> <!-- /container -->
</div>

<footer class="container">
    <div class="row">
        ... footer area ...
    </div>
</footer>

This way we can then use the .wrapper class to push the footer down however we want it too with CSS, and we do this by using the Ryan Fait Sticky Footer approach. In the case of the bootstrap, in order to to fit the top fixed navbar we have to first push the main container down instead of the body, per the bootstrap default settings. So we do this:

CSS

.wrapper > .container {
    padding-top: 60px;
}

This way we can fit the top navbar nicely in place. Afterwards we just give our footer a height and then eliminate that same width with a negative margin from the .wrapper container like so:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -40px;
}

footer {
    height: 40px;
}

Keep in mind though that the footers height has to match exactly what you're removing from the .wrapper container, thusly if you add any extra margin or padding or a border to the footer you have to compensate with the negative margin added to the .wrapper container accordingly.

In order to extend this approach to support the bootstrap responsive stylesheet, i have added the following media queries: (they are inline with the fixed navbar)

@media (max-width: 979px) {
    .wrapper > .container {
        padding-top:0;
    }

   .wrapper {
        height:auto;
        margin:auto;
        min-height:0;
   }
}

Here is a short demo with this approach, this method should work for both the fluid and fixed container from the bootstrap.

Demo, edit here.

jQuery Setting Container and Footer Heights

1 Answers1