[решено] Как растянуть блок ТОЧНО до нижнего края экрана

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

Как растянуть блок ТОЧНО до нижнего края экрана

Вчера весь рабочий день просидел в гугле, но так и не смог найти ответа на вопрос: "Как в css растянуть блок по вертикали?". Точнее, ответы есть, но они на элементарные случай, когда блок растягивается на 100% высоты своего родителя. Но этот и подобные способы не работают, если перед моим блоком стоит другой блок, и мне нужно, соответственно, заполнить растягиваемым блоком все пространство от его текущего положения до конца экрана. Причем мне нужно именно растянуть блок точно до правого нижнего угла, а не "обрезать" родительским блоком все, вылезло за его размеры.

Постараюсь объяснить зачем мне это нужно на простом примере: http://jsfiddle.net/ongpj2vz/

В этом примере div.header имеет изменяемую высоту, а декоративные разделители (div.separator_xxx) должны всегда начинаться строго в 50пикселях от нижней границы div.header и в заканиваться в 50 пикселях от нижней границы экрана.

В примере я искусственно выровнял их снизу, зная точный размер заголовка... но стоит мне расширить/сузить высоту заголовка, и мое позиционирование "полетит", т.к. я не знаю правильных координат нижней границы div.work_area.

Прошу помочь с решением... т.к. мозг уже кипит. Важно! - интересует решение на чистом CSS, без скриптов ( которые по дефолту выключены, наверное, в половине браузеров)

suvolod,

Цитата:

Цитата suvolod

интересует решение на чистом CSS, без скриптов»

Если вас устроит поддержка flexbox браузерами, то вот: JsFiddle. Правда странное решение делать одну половину координат позиционирования в абсолютных значениях, а вторую - в относительных :)
Пример: Если заданы размеры родительского элемента (с классом parent) и первый дочерний элемент не покрывает их полностью - второй с классом growing-child займет всё доступное место.

Код:

.parent {

        display: flex;

        flex-direction: column; /* порядок элементов */

        /* height, width */

}



.growing-child {

        flex-grow: 1;

}

HTML код:

<div class="parent">

        <div>Child #1</div>

        <div class="growing-child">Child #2</div>

</div>

P.S.: Здесь - неплохая ознакомительная справка по flexbox'ам, правда, на английском.

спасибо... про свойство flex слышал, но никогда не использовал. теперь буду знать.
Правда, в итоге применять это свойство я пока поостерегся, т.к. только новейшие браузеры его могут поддерживать. Например, лично я сижу сейчас на FFv28 (все версии старше уже хромировались, и меня это мало устраивает.) В итоге пришлось базовую верстку сделать на табличках, вложить в каждую ячейку div-ы, и позиционироваться уже от них.

Цитата:

Цитата suvolod

(все версии старше уже хромировались, »

Вы заблуждаетесь.

Цитата:

Цитата suvolod

т.к. только новейшие браузеры его могут поддерживать »

Все, что старше 2012 года - более-менее поддерживают, для современного проекта может и подойти. Разве что добавить уведомление типа Browser Update.

Цитата:

Цитата suvolod

FFv28 (все версии старше уже хромировались »

Если вы имели в виду смену движка на Blink из хрома - как выше заметил Iska, это неправда - в Firefox всё еще Gecko.
А если вы про изменения в интерфейсе - да поможет вам дополнение Classic Theme Restorer (или тема оформления вроде Simple White)