Comment puis-je faire en sorte que ma mise en page Flexbox occupe 100% de l’espace vertical?

Comment puis-je dire qu’une ligne de mise en page Flexbox consum l’espace vertical restant dans une fenêtre de navigateur?

J’ai une disposition en flexbox à trois rangées. Les deux premières lignes sont à hauteur fixe, mais la troisième est dynamic et je souhaite qu’elle atteigne la hauteur maximale du navigateur.

entrer la description de l'image ici

J’ai un autre flexbox dans la ligne 3 qui crée un ensemble de colonnes. Pour ajuster correctement les éléments dans ces colonnes, j’en ai besoin pour comprendre toute la hauteur du navigateur, par exemple pour la couleur d’arrière-plan et l’alignement d’éléments à la base. La disposition principale ressemblerait finalement à ceci:

entrer la description de l'image ici

.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; } 
  
this is the header
this is the second line
col1
col2
col3

J’ai essayé d’append un atsortingbut height , ce qui fonctionne quand je le mets à un numéro fixe, mais pas à 100% . Je comprends la height: 100% ne fonctionne pas, car le contenu ne remplit pas la fenêtre du navigateur, mais puis-je reproduire l’idée en utilisant la mise en page Flexbox?

Vous devez définir la height de html, body, .wrapper à 100% (pour hériter de la hauteur totale), puis définir une valeur de flex supérieure à 1 sur .row3 et non sur les autres.

 .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; } 
 
this is the header
this is the second line
col1
col2
col3

définir l’enveloppe à la hauteur de 100%

 .vwrapper { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; height: 100%; } 

et mettre la 3ème rangée pour flex-croître

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

démo