Вертикальная пружинная проставка 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>

РЕДАКТИРОВАЛ пример, чтобы лучше соответствовать моим потребностям.

Спасибо.

Answer 1

К сожалению, нет чистого CSS-способа сделать это, потому что вы пытаетесь сделать следующее:

spring height = parent height - n children's height

Вы можете сделать это довольно легко с помощью некоторого jQuery:

Разметка

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

В действие здесь .

Answer 2

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