Comment puis-je faire en sorte que ma mise en page Flexbox prenne 100% d'espace vertical?

102

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.

entrez la description de l'image ici

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:

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

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

Développer l'extrait

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?

html css flexbox Singe de placard maléfique
la source

Upvote pour les visuels, comment les avez-vous créés?

Jonathan

OmniGraffle et Pixelmator pour les retouches.

Evil Closet Monkey

Réponses:

115

Vous devez définir heightde html, body, .wrapperla100% (pour la hauteur Hériter pleine) et puis juste définir une flexplus grande valeur que 1pour .row3et 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;
    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>

Développer l'extrait

DEMO

G-Cyrillus
la source

Y a-t-il un moyen de le faire tout en faisant étendre les div de contenu pour remplir leur contenu? Vous avez donné votre exemple ici .

iameli

@iameli, utilisez la hauteur minimale

G-Cyrillus

Le JSFiddle est cassé

Joel Peltonen

Voici la démo codepen de travail: codepen.io/mprinc/pen/JjGQvae et explication dans la question similaire: stackoverflow.com/a/63174085/257561

mPrinC

violon remplacé par un codepen qui ne devrait pas disparaître, c'est une copie de l'extrait. Notez que la hauteur minimale n'est plus nécessaire dans la version Chrome d'aujourd'hui.

G-Cyrillus

régler l'emballage à une 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 réglez la 3e rangée sur flex-grow

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

démo

vals
la source

Dans mon cas html, body, .wrapper {hauteur: 100%; } travaille. non seulement le wrapper fonctionne.

gnganapath

Laissez-moi vous montrer une autre méthode qui fonctionne à 100%. J'ajouterai également du rembourrage 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 voir, nous pouvons y parvenir avec quelques wrappers pour le contrôle tout en utilisant l'attribut flex-grow & flex-direction.

1: Lorsque le parent "flex-direction" est une "ligne", son enfant "flex-grow" fonctionne horizontalement. 2: Lorsque le parent "flex-direction" est "columns", son fils "flex-grow" travaille verticalement.

J'espère que cela t'aides

Daniel

GaddMaster
la source

divexagéré.

John

Vous pouvez supprimer l'un de vos flex-pad-y:)

Eoin

Agréable..! C'est le seul exemple qui a réussi à faire en sorte que mon "contenu" <div> (entre mon en-tête et mon pied de page) remplisse toute la hauteur de l'écran. Tous les autres exemples semblent ignorer l'attribut "hauteur: 100%".

Mike Gledhill

C'est une solution cool. Je sais que John dit au-dessus de DIV overkill, mais je ne suis pas d'accord. Vous avez besoin des quatre divs pour utiliser Flex Grow à la fois horizontalement et verticalement (verticalement, c'est important!). Heureux d'avoir pu aider ! Avoir les quatre DIV vous donne beaucoup de flexibilité. Une fois que vous commencez à essayer de supprimer les DIV, cette flexibilité commence à s'estomper!

GaddMaster le