Можно ли сверстать этот лэйаут без применения javascript-хаков?

Question

[Сергей Протько]

По работе возникла задачка, которую я пытался решить без применения JS, но увы не вышло.
jsfiddle.net/teMFs/1/ — пример того, что у меня получилось.

Суть в том, что бы центральная область с контентом была отцентрирована по вертикали. Для этого я применил flexbox layout, но ему нужно что бы контейнер так же был 100% высоты. Проблемы добавляют блок с кнопками, который должен быть прикреплен к низу страницы. Увы, высота этого блока не фиксированная, так что сделать как обычно не выходит. Можно ли это все сделать только средствами CSS?


Задача только под webkit-ы, тоесть кросбраузерной поддержки особо ненадо. Мой пример должен работать в опере и огнелисе. Теоритически в IE10.

Comments

[akral]

.

Answer 1

[Слава]

копните в сторону табличных свойств. что-то на подобие футер ет боттом флексибл

Comments

[Сергей Протько]

Как-то забыл про таблицы… попробую

[Сергей Протько]

А мне файрфокс ненужен.

Answer 2

[Александр Кит]

А почему 100% высота не подходит? Вы же от высоты viewport-a отталкиваетесь? Вот пример для вебкита: mask/fiddle (смотрим css таб)

Answer 3

[spmbt]

Таблица высотой 100% в лайауте, который сконструировать по принципам, описанным в habrahabr.ru/post/151320/.

Answer 4

[Malyw]

Как-то так:
jsfiddle.net/sgospodarets/QWb4H/4/

Comments

[Сергей Протько]

ну я похоже уже сделал, тоже с помощью css-table.

[jesustown]

а как потом решать проблему абсолюного позиционирования внутри таблице?