[CSS] hauteur adaptable et scrool

[Wells]

Bonjour à tous, une petite colle qui m'est posé concernant deux DIV en CSS.

Une image  pour y voir clair :



Voila, j'ai donc un div rouge qui s’étire en faisant 100% de la hauteur de son conteneur. J'écris des choses dedans. Puis j'ajoute un DIV à la suite (celui en vert)

Je veux que ce DIV prenne toute la hauteur restante, et que si son contenu est encore trop grand en hauteur, des scroll apparaissent dans ce DIV vert.

Je passe peut etre à coté d'un truc à la con, mais j'y arrive po ^^

[Xenos]

Salut,

j'ai pas l'image ici (proxy youpi), mais Je veux que ce DIV prenne toute la hauteur restante implique souvent de définir explicitement la taille du conteneur de la DIV.

[Wells]

Oui c'est ce que je crains, a mon avis on peut pas faire ce que je souhaite, mais je demande au cas ou ^^

PS: j'avais pas préciser, le tout doit se redimensionner automatiquement en fonction de la taille de l’écran, c'est l’intérêt des %

[@lucard]

Passe par du Flex :

<div class="conteneurRouge">

   <div class="contenuTexte"> Texte, texte texte texte, texte texte texte, texte texte texte, ...j'ai pas l'image ici (proxy youpi),</div>

   <div class="contenuVert">j'ai pas l'image ici  non plus (proxy youpi),</div>

</div>

*{margin:0px;padding:0px;font-size:1em;}



.conteneurRouge {

     display: flex;

     flex-direction: column;

     flex-wrap: nowrap;

     justify-content: flex-start;

     align-content: center;

     align-items: stretch;

 border:red 5px solid;

 width:90vw; /* vw pour "View Width", et 90 est un pourcentage / à remplacer par % si .conteneurRouge est dans une div */

 height:90vh; /* vh pour "View Height", et 90 est un pourcentage - Donc 90% de la hauteur de l'écran (Vue) */

 margin:auto;

   }



.contenuTexte {

     flex: 0 1 auto;  /*  0 pour dire qu'il garde la taille minimum*/

 padding:0.5em;

   }



.contenuVert {

     flex: 1 2 auto;  /*  1 pour dire qu'il prenne la plus grand taille par rapport aux autres "contenu" - et 2 pour qu'il puisse "+" se réduire plus que contenuText */

 background:rgba(0,255,0,0.2);

 border:5px solid green;

overflow:auto;

 margin:0.5em;

 padding:0.5em;

 border-radius:1em;

   }

EDIt: ajout d'un overflow:auto pour le scroll =)

Test : http://cssdeck.com/labs/jdzlvw9z

C'est ça ?

[Wells]

Ca à l'air de marcher, mais j'aimerais bien savoir ce qui fait la différence.

Est ce le fait de passer en unité vh ? Est ce le position flex, tout ca me semble bien nébuleux ^^

[@lucard]

Le flex permet de dire "ce DIV prend toute la hauteur restante"

Le vh permet de dire que "Ce DIV prend la hauteur (pourcentage) de l'écran, peu importe le contenu."
si tu mets height:200vh; et que tu as un écran fictif de 200px de haut, alors le DIV fera 400px.

si tu mets height:100%; le DIV sera haut de 100% de son contenu.... non pas de l'affichage.

Le vh s'applique uniquement si tu veux que ça soit en "plein" écran dans le navigateur.
si <DIV.conteneurRouge> se trouve dans un coin de ta page, imbriqué dans un autre DIV, alors passe la valeur en %.

[Argorate]

Connaissais pas cette propriété avec le display: flex
C'est intéressant comme astuce

[Wells]

C'est effectivement intéressant, et ça marche sous IE

Bref, en adaptant ça marche, mici !