Vertical spring spacer CSS

Question

Hello, 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

Well, if you have a container div (like in the example there) you can set it to a fixed height (in the example, 250px). But if you do not know the height of the div's container, but do know the height of it's sibling containers, you could try setting the height to 100% and giving it padding of whatever the divs above and below have for heights.

Answer 2

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.