Fesor
@Fesor
Full-stack developer (Symfony, Angular)

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

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

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


Задача только под webkit-ы, тоесть кросбраузерной поддержки особо ненадо. Мой пример должен работать в опере и огнелисе. Теоритически в IE10.
  • Вопрос задан
  • 5019 просмотров
Решения вопроса 1
@YNile
JS Developer
копните в сторону табличных свойств. что-то на подобие футер ет боттом флексибл
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
А почему 100% высота не подходит? Вы же от высоты viewport-a отталкиваетесь? Вот пример для вебкита: mask/fiddle (смотрим css таб)
Ответ написан
Комментировать
spmbt
@spmbt
Таблица высотой 100% в лайауте, который сконструировать по принципам, описанным в habrahabr.ru/post/151320/.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы