Как сделать так, чтобы мой макет flexbox занимал 100% вертикального пространства?

104

Как я могу сказать, что строка макета flexbox занимает оставшееся вертикальное пространство в окне браузера?

У меня трехрядный макет flexbox. Первые две строки имеют фиксированную высоту, но третья - динамическая, и я хотел бы, чтобы она увеличивалась до полной высоты браузера.

введите описание изображения здесь

У меня есть еще один flexbox в строке 3, который создает набор столбцов. Чтобы правильно настроить элементы в этих столбцах, мне нужно, чтобы они понимали всю высоту браузера - для таких вещей, как цвет фона и выравнивание элементов в основании. Главный макет в конечном итоге будет напоминать это:

введите описание изображения здесь

.vwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    //height: 1000px;
}
.vwrapper #row1 {
    background-color: red;
}
.vwrapper #row2 {
    background-color: blue;
}
.vwrapper #row3 {
    background-color: green;
    flex 1 1 auto;
    display: flex;
}
.vwrapper #row3 #col1 {
    background-color: yellow;
    flex 0 0 240px;
}
.vwrapper #row3 #col2 {
    background-color: orange;
    flex 1 1;
}
.vwrapper #row3 #col3 {
    background-color: purple;
    flex 0 0 240px;
}
<body>
    <div class="vwrapper">
        <div id="row1">
            this is the header
        </div>
        <div id="row2">
            this is the second line
        </div>
        <div id="row3">
            <div id="col1">
                col1
            </div>
            <div id="col2">
                col2
            </div>
            <div id="col3">
                col3
            </div>
        </div>
    </div>
</body>
Развернуть фрагмент

Я пробовал добавить heightатрибут, который работает, когда я устанавливаю его на жесткое число, но не когда я его устанавливаю 100%. Я понимаю, что height: 100%это не работает, потому что содержимое не заполняет окно браузера, но могу ли я воспроизвести эту идею с помощью макета flexbox?

html css flexbox Злая Обезьяна Шкаф
источник
2
Проголосуйте за визуальные эффекты, как вы их сделали?
Джонатан
2
OmniGraffle и Pixelmator для ретуши.
Evil Closet Monkey

Ответы:

116

Вы должны установить heightиз html, body, .wrapperк 100%(для того , чтобы наследовать всю высоту) , а затем просто установить flexбольшее значение , чем 1для , .row3а не на других.

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>
Развернуть фрагмент

ДЕМО

G-Cyrillus
источник
Любой способ сделать это, одновременно расширяя блоки содержимого, чтобы заполнить их содержимое? Раздвоенный пример здесь .
iameli 06
@iameli, используйте min-height для chrome вместо высоты fiddle.jshell.net/Lhhh3wde/1
G-Cyrillus
2
JSFiddle не работает
Джоэл Пелтонен
Вот рабочая демонстрация кода: codepen.io/mprinc/pen/JjGQvae и объяснение в аналогичном вопросе: stackoverflow.com/a/63174085/257561
mPrinC
fiddle заменен кодом, который не должен исчезнуть, это копия фрагмента. Обратите внимание, что min-height больше не требуется в сегодняшней версии для Chrome.
G-Cyrillus
18

установите обертку на высоту 100%

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

и установите 3-й ряд на гибкий рост

#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}

демо

вальс
источник
4
В моем случае html, body, .wrapper {height: 100%; } работает. не только обертка рабочая.
gnganapath
1

Позвольте мне показать вам другой способ, который работает на 100%. Я также добавлю отступы для примера.

<div class = "container">
  <div class = "flex-pad-x">
    <div class = "flex-pad-y">
      <div class = "flex-pad-y">
        <div class = "flex-grow-y">
         Content Centered
        </div>
      </div>
    </div>
  </div>
</div>

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

  .flex-pad-x {
    padding: 0px 20px;
    height: 100%;
    display: flex;
  }

  .flex-pad-y {
    padding: 20px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .flex-grow-y {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

Как видите, мы можем добиться этого с помощью нескольких оболочек для управления, используя атрибуты flex-grow и flex-direction.

1: Когда родительский «flex-direction» является «строкой», его дочерний «flex-grow» работает горизонтально. 2: Когда родительским «flex-direction» является «columns», его дочерний «flex-grow» работает вертикально.

Надеюсь это поможет

Даниэль

GaddMaster
источник
1
divперебор.
Джон
Можете удалить одного из своих flex-pad-y:)
Эоин
1
Ницца..! Это единственный пример, в котором мой «контент» <div> (между моим верхним и нижним колонтитулами) заполнял всю высоту экрана. Все остальные примеры, похоже, игнорируют атрибут «высота: 100%».
Майк Гледхилл,
Это крутые решения. Я знаю, что Джон говорит выше DIV overkill, но я не согласен. Вам понадобятся четыре блока div, чтобы использовать flex grow как по горизонтали, так и по вертикали (по вертикали важнее всего!). Рад, что смог помочь ! Наличие четырех DIV дает вам большую гибкость. Как только вы начинаете пытаться удалить DIV, эта гибкость начинает исчезать!
GaddMaster