Вертикальная пружинная проставка CSS

Question

Я новичок здесь в стеке переполнение. :-)

Как создать div, который автоматически изменит высоту, чтобы получить все заполненное пространство? Я попытался с
height:"auto"
, но не работает ... :(

Например:

<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 пример, чтобы соответствовать лучше мои needings

Спасибо..

Answer 1

К сожалению, это не чистый CSS способ сделать это так, что вы пытаетесь сделать, это:

spring height = parent height - n children's height 

Вы можете сделать это довольно легко с некоторыми JQuery, хотя:

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); 

В action here.

Answer 2

Ну, если у вас есть контейнер div (как в примере), вы можете установить его на фиксированную высоту (в примере 250px). Но если y ou не знает высоту контейнера div, но знаю высоту своих родственных контейнеров, вы можете попытаться установить высоту на 100% и дать ей заполнить все, что выше и ниже для высоты.