Div стремящийся заполнить свободное пространство по вертикали
 

Здравствуйте. Как сделать блок, который будет заполнять всё доступное пространство по вертикали.

На примере этот блок с классом .center

Суть заключается в том что высота главного блока неизвестна. она "резиновая",
хотелось бы сделать чтобы красный блок с классом .center
заполнял всю доступную высоту которая получается разностью .main_wrapper height - .top height

в примере .main_wrapper задана ширина в пикселях. но это только для наглядности. В реальности .main_wrapper = %, а высота блока .top = px
как вычислить разность в таком случае?


http://jsfiddle.net/Lg7d3Lz8/

вэтом примере видно что красный блок занимает пространство большее чем ему полагается и поэтом содержимое не помещается в диапазон места отведённого ему.

p.s. Извините что на fiddle выложил.

в здешнем эмуляторе браузера не видо было того что хотел показать.

Dtri,
так?
http://jsfiddle.net/Lg7d3Lz8/5/

ДА! огромное спасибо! 2 дня ковырялся с этим. А всё оказалось так просто.

Dtri,
это обозначает занять всё свободное в пропорции 1 или 100%
если у первого блока поставить 1 блоки разделят высоту на попополам 50 на 50
если поставить 2
200% то первый будет 66% второй 33% занимать

так как первый блок высота фиксированная -- свободное занимает только второй блок -- читайте документацию там больше инфы.

Ещё раз спасибо. Если не трудно дайте ссылку на хорошую и полную документацию.

нашёл на w3Scools. Ещё раз спасибо. Отличное свойство (flex)