Search code examples
htmlcsstwitter-bootstrapfooter

Stick footer to bottom of wrapper, and get page to fit the whole space between nav & footer

Here is the problem,

I'm using bootstrap, and I face this problem :

I have a webpage, containing a wrapper divided in 3 distinct items. First item is a bootstrap nav. Second item is a div (class col-lg-12 -> bootstrap). Third item is a div (class col-lg-12 -> bootstrap).

The navbar is always on top of the page, perfect.

Problem is that the footer must always be at the bottom of the page, I thought about absolute positionning but that doesnt fit, wrapper has some style attributes that footer should respect. AND, #page element has to fit the whole space (in height) between nav & footer. I mean that, even if there is only 1 text line in the #page element, the #page height must fit all available space.

ALSO CONSIDER THAT the #page div can contain MANY data, and so, its height can be bigger than the window height (at that moment, wrapper still contains all since it has a min-height 100% attr, and footer should still be under the #page element...)

<body>
    <div id="wrapper">
        <nav></nav> <!--bootstrap item-->
        <div id="page" class="col-lg-12"></div> <!--bootstrap class-->
        <div id="footer" class="col-lg-12"></div> <!--bootstrap class-->
    </div>
</body>

Style, actually, looks like this : 

<style>
    body,html{
        height:100%;
    }
    #wrapper{
        min-height:100%;
        border:2px solid red;
    }
    #page{
        border:2px solid blue;
    }
    #footer{
        border:2px solid green;
        position:relative;
        bottom:0;
        margin-top:20px;
        margin-bottom:15px;
        height:120px;
    }
</style>

I think the problem comes from the mix of custom css and bootstrap classes... but can't find any solution that fixes it... already went through many asked questions here on stack, but not working...

here is the actual fiddle :

http://jsfiddle.net/0eepqj4m/18/

thanks!

enter image description here

Solution

  • If you're willing to use absolute positioning this would be easier.

    Just add this to your footer:

    position: absolute;

    And then fix up a few on the other styles. Like adding position: relative; to the wrapper div, this gives the footer a reference to base it's position off of.

    EDIT

    Here's a jsfiddle with a short body length: http://jsfiddle.net/NateW/0eepqj4m/93/

    Here's a jsfiddle with a long body length: http://jsfiddle.net/NateW/0eepqj4m/94/

    Another Edit

    If you want to use jQuery use something like this... http://jsfiddle.net/NateW/0eepqj4m/92/

    I modified the answer from this SO question: set div height using jquery (stretch div height)