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?

if i understand you correctly, do you want the footer to always stick to the bottom of the page? — Software Guy, Apr 18 '14 at 14:43
you're really going to need to try harder with this question if you dont want to get downvoted and flagged. code youve tried? errors? jsfiddle? anything... — celeriko, Apr 18 '14 at 14:43
I'm guessing you're looking for a [sticky footer](http://www.cssstickyfooter.com/). — Derek, Apr 18 '14 at 14:44

score 1 · Accepted Answer · edited Mar 17 '15 at 16:32

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:???;

edited Mar 17 '15 at 16:32

Eric Leschinski

146,994
96
417
335

answered Apr 18 '14 at 14:52

dayuloli

16,205
16
71
126

score 0 · Answer 2 · answered Apr 18 '14 at 14:51

0

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

answered Apr 18 '14 at 14:51

Tom Spee

9,209
5
31
49

Good effort but that element you call resizable is not actually resizable. Have you tried to resize the page? :) – Batu.Khan Apr 18 '14 at 14:55
That's true but if you reload the page after resizing it should work fine. It's not the best solution but the only one I could come up with for now :) – Tom Spee Apr 18 '14 at 14:57
Well if you put this inside `$(window).resize` function too, that works but i dont think OP wants a jquery solution. – Batu.Khan Apr 18 '14 at 15:00

How do I make div fill the remaining space?

2 Answers2