Remplissez l'espace vertical restant avec CSS en utilisant display: flex

218

Dans une disposition à 3 rangées:

  • la rangée du haut doit être dimensionnée en fonction de son contenu
  • la ligne du bas doit avoir une hauteur fixe en pixels
  • la rangée du milieu doit s'agrandir pour remplir le conteneur

Le problème est que lorsque le contenu principal se développe, il écrase les lignes d'en-tête et de pied de page:

Flexion mauvaise

HTML:

<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break - ->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

CSS:

section {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  height: 300px;
}
header {
  flex: 0 1 auto;
  background: tomato;
}
div {
  flex: 1 1 auto;
  background: gold;
  overflow: auto;
}
footer {
  flex: 0 1 60px;
  background: lightgreen;
  /* fixes the footer: min-height: 60px; */
}

Violon:

J'ai la chance de pouvoir utiliser le dernier et le meilleur du CSS, sans tenir compte des anciens navigateurs. J'ai pensé que je pourrais utiliser la mise en page flex pour enfin me débarrasser des anciennes mises en page basées sur des tableaux. Pour une raison quelconque, ça ne fait pas ce que je veux ...

Pour mémoire, il y a beaucoup de questions liées à SO sur le "remplissage de la hauteur restante", mais rien qui résout le problème que j'ai avec flex. Réf:

css  layout  flexbox 
— Zilk
source
Semble fonctionner comme prévu sur le violon.
— Dayan
Oui, vous devez décommenter le reste du contenu de <div> pour voir comment il se brise. J'aurais peut-être dû lier la version cassée. Pardon.
— Zilk
J'ai ajouté les deux versions à la question maintenant.
— Zilk
Je vois ce que tu veux dire maintenant.
— Dayan
— Jonathan Stray

Réponses:

276

Simplifiez-vous la vie: DEMO

section {
  display: flex;
  flex-flow: column;
  height: 300px;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;  /* min-height has its purpose :) , unless you meant height*/
}
<section>
  <header>
    header: sized to content
    <br/>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>
Développer l'extrait

Version plein écran 

section {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;
  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;
  /* min-height has its purpose :) , unless you meant height*/
}

body {
  margin: 0;
}
<section>
  <header>
    header: sized to content
    <br/>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>
Développer l'extrait

— G-Cyrillus
source
22
Et si nous voulons que la section ait une hauteur de 100%?
— Paul Totzke
6
@PaulTotzke Alors c'est plus une autre question, il vous suffit de régler la hauteur à 100%. Comme d'habitude, les parents ont besoin d'une hauteur définie / utilisable, sinon nous avons l'exemple classique de 100% de 'null' pour le code ci-dessus: html, body, section {height: 100%;} où section est l'enfant direct de body jsfiddle.net/ 7yLFL / 445 cela donne un en-tête et un pied de page fixes.
— G-Cyrillus
1
@GCyrillus Merci. Je ne savais pas que le html, le corps ET le wrapper devaient tous avoir une taille définie.
— Paul Totzke
1
Merci pour le "min-height a son but". Je me demandais pourquoi cela ne fonctionnait pas, en utilisant la hauteur pour les éléments fixes.
— Maciej Krawczyk
2
J'ai eu un problème avec cette solution dans Firefox. Je l'ai rectifié en changeant flex: 1en flex-grow: 1. Merci pour la solution!
— étrange_developer
19

L'exemple ci-dessous inclut le comportement de défilement si le contenu du composant central développé dépasse ses limites. Le composant central occupe également 100% de l'espace restant dans la fenêtre.

jsfiddle ici

html, body, .r_flex_container{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}
.r_flex_container {
    display:flex;
    flex-flow: column nowrap;
    background-color:blue;
}

.r_flex_fixed_child {
    flex:none;
    background-color:black;
    color:white;

}
.r_flex_expand_child {
    flex:auto;
    background-color:yellow;
    overflow-y:scroll;
}

Exemple de code HTML pouvant être utilisé pour démontrer ce comportement

<html>
<body>
    <div class="r_flex_container">
      <div class="r_flex_fixed_child">
        <p> This is the fixed 'header' child of the flex container </p>
      </div>
      <div class="r_flex_expand_child">
            <article>this child container expands to use all of the space given to it -  but could be shared with other expanding childs in which case they would get equal space after the fixed container space is allocated. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
            </article>
      </div>
      <div class="r_flex_fixed_child">
        this is the fixed footer child of the flex container
        asdfadsf
        <p> another line</p>
      </div>

    </div>
</body>
</html>
— gamozzii
source
3
Cela peut être légèrement simplifiée en supprimant htmldu sélecteur et appyling height: 100vhà bodyspécifiquement: jsfiddle.net/pm6nqcqh/1
— Dai
J'ai remarqué une différence entre flex: auto et flex: 1 sur l'enfant extensible. Avec flex: auto, les autres enfants semblent rétrécir en cas de besoin, avec flex: 1 ils ne le font pas (dans Chrome)
— mvermand
8

Une approche plus moderne consisterait à utiliser la propriété grid.

section {
  display: grid;
  align-items: stretch;
  height: 300px;
  grid-template-rows: min-content auto 60px;
}
header {
  background: tomato;
}
div {
  background: gold;
  overflow: auto;
}
footer {
  background: lightgreen;
}
<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>
Développer l'extrait

— wuppie367
source
2
Le support de la grille CSS est assez récent. Je ne l'utiliserais pas à moins que vous n'ayez à prendre en charge d'anciens navigateurs.
— adi518
4

Utilisez la flex-growpropriété pour le div de contenu principal et donnez le dispaly: flex;à son parent;

body {
    height: 100%;
    position: absolute;
    margin: 0;
}
section {
  height: 100%;
  display: flex;
  flex-direction : column;
}
header {
  background: tomato;
}
div {
  flex: 1; /* or flex-grow: 1  */;
  overflow-x: auto;
  background: gold;
}
footer {
  background: lightgreen;
  min-height: 60px;
}
<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>
Développer l'extrait

— Deepu Reghunath
source
Existe-t-il une autre solution à ce problème (où la sectionhauteur n'est pas fixe?) Plutôt que d'utiliser position: absolute?
— Ben le
1
@ben Si vous connaissez la hauteur de l'élément. Ensuite, vous pouvez éviter d'utiliser position: absolute;. https://jsfiddle.net/xa26brzf/
— Deepu Reghunath
0

Voici la démo codepen montrant la solution:

Faits saillants importants:

  • tous les conteneurs de html, body... .container, devraient avoir l' ensemble de la hauteur à 100%
  • l'introductionflex de N'IMPORTE QUEL élément flexible déclenchera le calcul des tailles des éléments en fonction de la distribution flexible:
    • si une seule cellule est définie sur flex, par exemple: flex: 1alors cet élément flexible occupera le reste de l'espace
    • s'il y en a plus d'un avec la flexpropriété, le calcul sera plus compliqué. Par exemple, si l'élément 1 est défini sur flex: 1et l'élément 2 est défini sur , flex: 2l'élément 2 occupera deux fois plus d' espace restant
  • Propriété de taille principale
— mPrinC
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.