Como posso fazer com que o layout do flexbox ocupe 100% do espaço vertical?

102

Como posso saber se uma linha de layout flexbox consome o espaço vertical restante em uma janela do navegador?

Eu tenho um layout de flexbox de 3 linhas. As duas primeiras linhas têm altura fixa, mas a terceira é dinâmica e gostaria que aumentasse até a altura total do navegador.

insira a descrição da imagem aqui

Eu tenho outro flexbox na linha 3 que cria um conjunto de colunas. Para ajustar adequadamente os elementos dentro dessas colunas, preciso que eles entendam a altura total do navegador - para coisas como cor de fundo e alinhamentos de itens na base. O layout principal seria basicamente semelhante a este:

insira a descrição da imagem aqui

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

Expandir trecho

Eu tentei adicionar um heightatributo, que funciona quando eu o configuro como um número fixo, mas não quando o configuro como 100%. Eu entendo que height: 100%não está funcionando, porque o conteúdo não está preenchendo a janela do navegador, mas posso replicar a ideia usando o layout flexbox?

html css flexbox Macaco do armário malvado
fonte

Votos positivos para os visuais, como você os fez?

Jonathan,

OmniGraffle e Pixelmator para retoques.

Evil Closet Monkey,

Respostas:

115

Você deve definir heightde html, body, .wrapperpara 100%(para herdar a altura total) e, em seguida, apenas definir um flexvalor maior do que 1para .row3e não nos outros.

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

Expandir trecho

DEMO

G-Cyrillus
fonte

Há alguma maneira de fazer isso e, ao mesmo tempo, expandir os divs de conteúdo para preencher seu conteúdo? Bifurcou seu exemplo aqui .

iameli

@iameli, use altura mínima para cromo em vez de altura fiddle.jshell.net/Lhhh3wde/1

G-Cyrillus

O JSFiddle está quebrado

Joel Peltonen

Aqui está a demonstração do codepen de trabalho: codepen.io/mprinc/pen/JjGQvae e a explicação na pergunta semelhante: stackoverflow.com/a/63174085/257561

mPrinC

violino substituído por um codepen que não deve desaparecer, é uma cópia do trecho. Observe que a altura mínima não é mais necessária na versão cromada de hoje.

G-Cyrillus

defina o invólucro para 100% de altura

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

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

  height: 100%;
}

e defina a 3ª linha para flex-grow

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

demo

vals
fonte

No meu caso html, body, .wrapper {height: 100%; } está funcionando. não apenas o envoltório funcionando.

gnganpath

Deixe-me mostrar outra maneira que funciona 100%. Também adicionarei algum preenchimento para o exemplo.

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

Como você pode ver, podemos conseguir isso com alguns invólucros para controle ao utilizar o atributo flex-grow & flex-direction.

1: Quando o pai "flex-direction" é uma "linha", seu filho "flex-grow" funciona horizontalmente. 2: Quando o "flex-direction" pai é "colunas", seu filho "flex-grow" funciona verticalmente.

Espero que isto ajude

Daniel

GaddMaster
fonte

divexagero.

João,

Você pode remover um de seus flex-pad-y:)

Eoin

Agradável..! Este é o único exemplo que conseguiu fazer com que meu "conteúdo" <div> (entre meu cabeçalho e rodapé) ocupasse toda a altura da tela. Todos os outros exemplos parecem ignorar o atributo "altura: 100%".

Mike Gledhill

É uma solução legal. Eu sei que John diz exagero DIV acima, mas eu não concordo. Você precisa dos quatro divs para utilizar o crescimento flexível tanto horizontal quanto verticalmente (verticalmente é o mais importante!). Que bom que pude ajudar! Ter os quatro DIVs oferece bastante flexibilidade. Quando você começa a tentar remover DIVs, essa flexibilidade começa a murchar!

GaddMaster