Как получить резиновый блок посередине?

Заготовка для примера
jsfiddle

Хочется получить средний блок, который занимает всё оставшееся место между первым и вторым при условии, что размер родителя фиксированный. Свойство
height: 100%заставляет нижний блок выпадать из контекста — как быть?

UPD:
Если добавить родителю
display: flex
flex-direction: column
а среднему блоку
flex: 1то, вроде, проблема решается, но тогда у меня ещё два вопроса:
- почему это заработало?
- это похоже на какой-то хак, так ли это или всё ок?
jsfiddle
  • Вопрос задан
  • 2743 просмотра
Решения вопроса 1
jsfiddle.net/88covhw0/2
Можно использовать display: table; и display; table-row;
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Flexbox тоже можно применить, если кроссбраузерность устраивает.

Подробнее о свойстве flex можно прочитать здесь. Там же рядом и про остальные свойства flexbox.
Ответ написан
Ваш ответ на вопрос

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

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