Як я можу зробити так, щоб мій макет flexbox займав 100% вертикальний простір?

102

Як я можу сказати, що рядок макета flexbox споживає решту вертикального простору у вікні браузера?

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

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

У мене є ще один 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

— Зла шафа-мавпа
джерело

Оновлення для візуалів, як ви їх зробили?

— Джонатан

OmniGraffle та Pixelmator для торкань.

— Evil Closet Monkey

Відповіді:

115

Ви повинні встановити 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>

Розгорніть фрагмент

DEMO

— G-кирилиця
джерело

Будь-який спосіб зробити це, також розширивши вміст divs, щоб заповнити їхній вміст? Тут ви подали свій приклад .

— iameli

@iameli, використовуйте min-height для хромування замість висоти fiddle.jshell.net/Lhhh3wde/1

— G-Cyrillus

JSFiddle розбито

— Джоел

Тут працює codepen демо: codepen.io/mprinc/pen/JjGQvae і пояснення в аналогічне питання: stackoverflow.com/a/63174085/257561

— mPrinC

скрипка замінена кодером, який не повинен зникати, це копія фрагмента. Зауважте, що мінімальна висота більше не потрібна в сьогоднішній хромованій версії.

— G-Cyrillus

встановити обгортку на висоту 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;
}

демонстрація

— вали
джерело

У моєму випадку html, body, .wrapper {висота: 100%; } працює. не тільки обгортка працює.

— gnganpath

Дозвольте показати вам інший спосіб, який працює на 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-raste & flex-direction.

1: Коли батьківський "згинальний напрямок" є "рядком", його дочірня "згинається-росте" працює горизонтально. 2: Коли батьківським "флекс-напрямком" є "стовпчики", його дочірня "згинати-рости" працює вертикально.

Сподіваюся, це допомагає

Даніель

— GaddMaster
джерело

divнадмірність.

— Джон

Ви можете видалити один із своїх flex-pad-y:)

— Eoin

Приємно ..! Це єдиний приклад, якому вдалося змусити мій "вміст" <div> (між моїм заголовком та колонтитулом) заповнити всю висоту екрана. Усі інші приклади, здається, ігнорують атрибут "висота: 100%".

— Майк Гледхілл

Це круті рішення. Я знаю, що Джон говорить вище надмірності DIV, але я не згоден. Вам потрібні чотири диви, щоб використовувати гнучкий ріст як по горизонталі, так і по вертикалі (Вертикал був важливим!). Радий, що можу допомогти! Наявність чотирьох DIV дає вам велику гнучкість. Як тільки ви почнете намагатися видалити DIV, ця гнучкість починає в’янути!

— GaddMaster