Как я могу сделать мой макет flexbox занять 100% вертикального пространства?

Question

Как я могу сделать мой макет flexbox занять 100% вертикального пространства?

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

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

у меня есть еще один flexbox в row-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?

2 59

html css css3 flexbox

2 ответа:

установите обертку на высоту 100%
.vwrapper {
  display: flex;
  flex-direction: column;

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

  height: 100%;
}
и установите 3-й ряд на flex-grow
#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}
демо

10

G-Cyr · Accepted Answer · 2018-01-19 01:10:00

вы должны установить 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;
}
#col2 {
    background-color: orange;
    flex: 1 1;
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
}

<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>

демо