How do I make div fill the remaining space?

Question

Let's say I have this basic html layout:

• Header

• Auto-sizing DIV

• Footer.

Header and footer have fixed pixel size.

<div id="header">
Lorem Ipsum
</div>

<div id="auto">
This div should automatically change size
</div>

</div id="footer">
Lorem Ipsum
</div>

And the CSS

document,body {
width:100%;
height:100%;
}
#header {
width:100%;
height:50px;
}
#auto {
height:100% (it fills 100% of the window height instead the remaining)
}
#footer {
width:100%;
height:50px;
}

How do I make div fill the remaining space?

Answer 1

There are many ways to do this, but I myself use a sticky footer.

CSS-Tricks
StickyFooter

I'd advise you to create a container div element which contains the header , main and footer and set that with width:100%; height:100% min-height:???; width:100%; height:100% min-height:???;

Answer 2

You could fix it by getting the window height with jQuery and take the height of the header and footer of the windows height and set that on your div.

Like this:

header {
    background: red;
    height: 10px;
    position: fixed;
    top: 0;
    width:100%;
}

.resizable {
    background: blue;
    width: 100%;
}

footer {
    background: red;
    bottom: 0;    
    height: 10px;
    position: fixed;
    width:100%;
}

And this is the jQuery:

$(document).ready(function(){

    var newHeight = $(window).height() - 20;

    $(".resizable").css("height", newHeight);

});

Working JSFiddle