Вопрос:
Простой сценарий – я бы подумал.
Идея заключается в том, что app-bar является фиксированной высотой, установленной в 56 пикселей. Содержимое DIV внизу должно заполнить оставшееся пространство – высота контейнера составляет около 320 пикселей, которая устанавливается с использованием процента от родителя.
Если я использую height:100%, то flexbox не работает, если я использую height:320px.
Есть идеи? Высота должна быть в процентах, поскольку она заполняет отзывчивого родителя.
<header class=»img-app-bar»> <div class=»container»> <div class=»app-bar»></div> <div class=»content»></div> </div> </header> .img-app-bar { .container { display:flex; flex-direction:column; background-color:Red; height:100%; .app-bar { flex:0; } .content { flex:1; background-color:Yellow; } } } Лучший ответ:
Проблема в том, что .img-app-bar тоже нуждается в высоте. В противном случае ваш .container занимает 100% высоту 0.
body, html {width: 100%; height: 100%; margin: 0; padding: 0} .img-app-bar { width: 100%; height: 100%; } .container { display:flex; flex-direction:column; background-color:Red; height:100%; } .app-bar { height: 56px; } .content { flex:1; background-color:Yellow; }<header class=»img-app-bar»> <div class=»container»> <div class=»app-bar»></div> <div class=»content»></div> </div> </header>Ответ №1
Если родительский элемент не имеет стиля css высотой, процентная высота для ребенка не будет работать (если вы не используете абзац абсолютного позиционирования) – это то, как работает css
Работа для вашей ситуации заключается в том, чтобы сделать следующее (вышеупомянутый взлом абсолютной позиции):
.img-app-bar { position: relative; /* the following is just for giving height without using height */ padding-top: 300px; background: red; } .container { /*this seems to set a height without setting a height*/ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .flex { display: flex; flex-direction: column; height: 100%; } .app-bar { height: 56px; background: green; } .content { flex:1; background: blue; }<header class=»img-app-bar»> <div class=»container»> <div class=»flex»> <div class=»app-bar»></div> <div class=»content»></div> </div> </div> </header>