Question

I’m new here at stack overflow. 🙂

How can I create a div that automatically change it’s height to get all the space filled?
I’ve tried with
height:"auto"
but doesn’t work… 🙁

For example:

<div style="height:300px">
    <div style="height:50px">...</div>
    <div>The height of this div varies from page to page...</div>
    <div style="height:???">SPROING!!</div>
    <div style="height:50px">...</div>
</div>

EDITED the example to match better my needings.

Thanks.

Answer 1

Unfortunately there isn’t a pure CSS way to do it since what you’re trying to do is:

spring height = parent height - n children's height

You can do it pretty easily with some jQuery though:

Markup

<div id="parent">
    <div id="top">...</div>
    <div id="spring">SPROING!!</div>
    <div id="bottom">...</div>
</div>

jQuery

var leftover = $('#parent').height() - $('#top').height() - $('#bottom').height();
$('#spring').height(leftover);

In action here.