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

[suvolod]

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



Постараюсь объяснить зачем мне это нужно на простом примере:

http://jsfiddle.net/ongpj2vz/

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



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



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

[Habetdin]

suvolod,
Цитата suvolod:



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

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

Если вас устроит

поддержка flexbox браузерами

, то вот:

JsFiddle

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

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



Код:

Код: Выделить всё

.parent {
	display: flex;
	flex-direction: column; /* порядок элементов */
	/* height, width */
}
.growing-child {
	flex-grow: 1;
}

HTML код:

Код: Выделить всё

	Child #1
	Child #2

P.S.:

Здесь

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

[suvolod]

спасибо... про свойство flex слышал, но никогда не использовал. теперь буду знать.

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

[Iska]

Цитата suvolod:



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

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

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

[Habetdin]

Цитата suvolod:



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

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

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

Browser Update

.


Цитата suvolod:



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

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

Если вы имели в виду смену движка на Blink из хрома - как выше заметил Iska, это неправда - в Firefox всё еще Gecko.

А если вы про изменения в интерфейсе - да поможет вам дополнение

Classic Theme Restorer

(или тема оформления вроде

Simple White

)