Comment puis-je savoir qu'une ligne de disposition de Flexbox consomme l'espace vertical restant dans une fenêtre de navigateur?
J'ai une disposition flexbox à 3 rangées. Les deux premières rangées ont une hauteur fixe, mais la 3ème est dynamique et j'aimerais qu'elle atteigne toute la hauteur du navigateur.
J'ai une autre flexbox dans la rangée 3 qui crée un ensemble de colonnes. Pour ajuster correctement les éléments dans ces colonnes, j'ai besoin qu'ils comprennent toute la hauteur du navigateur - pour des choses comme la couleur d'arrière-plan et les alignements d'éléments à la base. La mise en page principale ressemblerait finalement à ceci:
.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>J'ai essayé d'ajouter un heightattribut, qui fonctionne lorsque je le définit sur un nombre fixe mais pas lorsque je le définis 100%. Je comprends que cela height: 100%ne fonctionne pas, car le contenu ne remplit pas la fenêtre du navigateur, mais puis-je reproduire l'idée à l'aide de la mise en page de la flexbox?