Футер переменной высоты и резиновый блок контента

[Veseloff]

Привет. Вот обычный прижатый футер. http://jsfiddle.net/qLEd3/ Суть в том, что мне надо сделать следующее. Надо сделать, чтобы футер был также прижат, но он может быть любой высоты, а блок контента, если его высота меньше высоты окна минус высоты хедера и футера должен доставать до футера. Чтобы пояснить что я хочу получить, я сделал это на js. http://jsfiddle.net/qLEd3/3/ Как можно сделать то же самое без него, кто подскажет?

[Melodyn]

Как мне известно, сделать такое на чистом css сейчас можно либо %, типа контент 75%, футер 25%, либо придется ждать, пока введут: http://htmlbook.ru/blog/zhemchuzhina-css3-funkciya-calc

[Veseloff]

Ну можно как минимум табличкой. Но мне интересно всё-таки как блоками такое запилить.

[rus]

типа того что ль?

[Veseloff]

типа того что ль?

Не, не ок. В любом случае есть скролл.

[mrnobody]

Можно с использованием Flexbox реализовать, но поддержка не очень http://caniuse.com/#feat=flexbox

 

Сделал пример, только без префиксов — http://jsfiddle.net/mrnobody/qLEd3/4/

Edited April 28, 2014 by mrnobody

[Veseloff]

Спасибо за попытку, но тоже не то — если в content забить много информации до состояния скролла, получится форменное безобразие.

[rus]

 

типа того что ль?

Не, не ок. В любом случае есть скролл.

 

в условии не было сказано ничего на счет скролла, но если включить немного воображалку, то можно и вот так.

 

ссори, забыл что при таком раскладе, текст контента будет наезжать на футер и избежать этого при динамической высоте футера без js скорее всего будет не возможно, хотя... я не такой уж знаток css3 может он поможет

[Sensei]

Для современных браузеров «flex», для всех остальных таблицы http://jsfiddle.net/8dpvJ/

[Veseloff]

Для современных браузеров «flex», для всех остальных таблицы http://jsfiddle.net/8dpvJ/

Спасибо, крутяк. Понимаю, что мои знания по вёрстке устаревают, надо будет обновить.

[amelice]

Для современных браузеров «flex», для всех остальных таблицы http://jsfiddle.net/8dpvJ/

Хороший пример!

У меня знания таблицы ограничивается на уровне создания меню. ( 

Поэтому интересно узнать, почему вы блоку .content присваиваете display: table-cell; а не display: table-row; ?

[Sensei]

В данном случае, думаю, нет разницы «table-cell» или «table-row».

Но ячейка при необходимости сможет еще и отцентрировать свое содержимое.

[SelenIT]

Для табличных элементов при необходимости создаются анонимные обертки, нужные по структуре. Например, рядом с table-row могут быть только другие table-row, поэтому если там затесалась "голая" table-cell, рендерер всё равно оборачивает ее в анонимный table-row.

[amelice]

Для табличных элементов при необходимости создаются анонимные обертки, нужные по структуре. Например, рядом с table-row могут быть только другие table-row, поэтому если там затесалась "голая" table-cell, рендерер всё равно оборачивает ее в анонимный table-row.

В таком случае, можно ли сказать что контент внутри блока с display: table-row; так же оборачивается в анонимный table-cell?

 

[SelenIT]

Насколько я в курсе, да.

[amelice]

Спасибо и еще один нубский вопрос, я когда-то читала, что при автоматической компановки(width: auto) таблица медленно рендерится, так как должно произойти полное обследование контента и после того как все готово, браузер распределит пространство между элементами таблицы.
Насколько это верно сейчас? И стоит ли вообще опасаться по этому поводу, когда обертываешь сегменты сайта, а не пункты меню?