В 3-рядном макете:
- верхний ряд должен быть измерен согласно его содержанию
- нижний ряд должен иметь фиксированную высоту в пикселях
- средний ряд должен расширяться, чтобы заполнить контейнер
Проблема заключается в том, что при расширении основного содержимого он разделяет строки верхнего и нижнего колонтитула:
HTML:
<section>
<header>
header: sized to content
<br>(but is it really?)
</header>
<div>
main content: fills remaining space<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
<!-- uncomment to see it break - ->
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
<!-- -->
</div>
<footer>
footer: fixed height in px
</footer>
</section>
CSS:
section {
display: flex;
flex-flow: column;
align-items: stretch;
height: 300px;
}
header {
flex: 0 1 auto;
background: tomato;
}
div {
flex: 1 1 auto;
background: gold;
overflow: auto;
}
footer {
flex: 0 1 60px;
background: lightgreen;
/* fixes the footer: min-height: 60px; */
}
Скрипки:
- http://jsfiddle.net/7yLFL/1/ (работает, с небольшим контентом)
- http://jsfiddle.net/7yLFL/ (не работает, с большим содержанием)
Мне повезло, что я могу использовать последние и лучшие в CSS, не считая устаревших браузеров. Я думал, что смогу использовать гибкий макет, чтобы наконец избавиться от старых макетов на основе таблиц. По какой-то причине он не делает то, что я хочу ...
Напомним, что в SO есть много вопросов о «заполнении оставшейся высоты», но нет ничего, что решало бы проблему, с которой я столкнулся с flex. Refs:
- Сделать div заполнить высоту оставшегося места на экране
- Заполните оставшееся вертикальное пространство - только CSS
- У вас есть div, чтобы заполнить оставшуюся высоту / ширину контейнера, когда вы делитесь им с другим div?
- Сделать растяжение вложенного div до 100% от оставшейся высоты div контейнера
- Как я могу сделать так, чтобы мой макет flexbox занимал 100% вертикального пространства?
- и т.д
Ответы:
Сделай это просто: DEMO
Полноэкранная версия
источник
flex: 1
наflex-grow: 1
. Спасибо за решение!Пример ниже включает в себя поведение прокрутки, если содержимое расширенного центрального компонента выходит за его границы. Также центральный компонент занимает 100% оставшегося пространства в области просмотра.
jsfiddle здесь
Пример HTML, который можно использовать для демонстрации такого поведения
источник
html
из селектора и применивheight: 100vh
к немуbody
: jsfiddle.net/pm6nqcqh/1Более современный подход заключается в использовании свойства grid.
источник
Используйте
flex-grow
свойство для основного содержимого div и передайтеdispaly: flex;
его родителю;источник
section
высота не фиксирована?), А не использоватьposition: absolute
?position: absolute;
. https://jsfiddle.net/xa26brzf/