web-dev-qa-db-fra.com

Comment faire en sorte que ma mise en page flexbox prenne 100% d'espace vertical?

Comment puis-je savoir qu'une rangée de mise en page flexbox consomme l'espace vertical restant dans une fenêtre de navigateur?

J'ai une mise en page flexbox sur 3 rangées. Les deux premières lignes ont une hauteur fixe, mais la 3ème est dynamique et je voudrais qu’elle atteigne toute la hauteur du navigateur.

enter image description here

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'ai besoin qu'ils comprennent toute la hauteur du navigateur - pour des éléments tels que la couleur d'arrière-plan et les alignements d'éléments à la base. La mise en page majeure ressemblerait finalement à ceci:

enter image description here

.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 attribut height, qui fonctionne lorsque je le définit comme un nombre fixe mais pas lorsqu'il est défini sur 100%. Je comprends que 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 présentation flexbox?

htmlcsscss3flexbox
76
Evil Closet Monkey

Vous devez définir height sur html, body, .wrapper sur 100% (pour hériter de la hauteur maximale), puis sur une valeur flex supérieure à 1 sur .row3 et pas 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;
}
<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>

DÉMO

99
G-Cyr

mettre l'emballage à hauteur 100%

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

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

  height: 100%;
}

et réglez la 3ème ligne sur Flex-Grow

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

démo

13
vals

Laissez-moi vous montrer une autre méthode qui fonctionne à 100%. Je vais également ajouter un peu de remplissage pour l'exemple.

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

Comme vous pouvez le constater, nous pouvons atteindre cet objectif avec quelques wrappers pour le contrôle, tout en utilisant l’attribut flex-grow & flex-direction.

1: Lorsque le parent "flex-direction" est une "rangée", son enfant "flex-grow" fonctionne horizontalement. 2: Lorsque le parent "flex-direction" est "colonnes", son enfant "flex-grow" fonctionne verticalement.

J'espère que cela t'aides

Daniel

0
GaddMaster