28172 sujets

CSS et mise en forme, CSS3

[Résolu] Height d'un enfant dont le parent est défini par min-height

Bonjour,

mon code html est schématiquement structuré comme suit :

<html>
<body>
<enfant>

</enfant>
</body>
</html>

Voici les hauteurs des éléments que j'ai défini :

html : height:100%
body : min-height:100% (car mon contenu dépasse la hauteur du viewport)
enfant : height : 30% (je veux que la hauteur de l'enfant soit de 30% du body).

Bien évidemment comme la hauteur du #body n'est pas définie, le bloc #enfant défini par 30% de #body ne marche pas.

J'ai lu sur un forum qu'une parade consistait à mettre une hauteur arbitraire de 1px sur #body. En effet dans ce cas j'ai bien la bonne hauteur de #enfant, cependant je ne sais pas pourquoi dans ce cas la hauteur du #body est exactement à 100% du viewport, et le contenu dépasse du #body.

Avez-vous une manière pour pouvoir définir la hauteur de l'enfant à 30% du #body, tout en permettant que la hauteur du #body s'adapte à son contenu ?

Merci d'avance !
Administrateur
Hello,

As-tu essayé de remplacer tes % par l'unité vh ?

Je pense que ce sera jouable.

Sinon, il reste la solution Flexbox Smiley cligne
Bonjour,

Merci pour l'info, je testerai en effet la solution "vh".

Pour la solution flexbox peux-tu juste me décrire ce à quoi tu penses ?
Sur #body tu mettrais un display:flex, flex-direction:column ?

Merci d'avance,

Matthieu
Modifié par Matt38 (27 Sep 2016 - 08:10)
Administrateur
Vite fait : oui pour body, sans oublier un min-height: 100vh.
Puis jouer avec la propriété flex sur ses enfants.
Raphael a écrit :
Hello,

As-tu essayé de remplacer tes % par l'unité vh ?


Bonjour Raphael,

Le problème de l'unité vh dans ce cas sera que le 30% sera relatif au viewport et non au body.
Car le body fait au minimum la hauteur du viewport mais pas au maximum...

Matt38 a écrit :

html : height:100%
body : min-height:100% (car mon contenu dépasse la hauteur du viewport)
enfant : height : 30% (je veux que la hauteur de l'enfant soit de 30% du body).


Bonjour Matt38,

Ta structure présente en fait une incohérence.
Tu définis une hauteur de body minimum à 100% du viewport. Dans le même temps tu définis une valeur absolue égale au viewport pour le html. Si le body est plus grand que le html, il faudra effectuer un scroll de l'élément html.
La question est : quel intérêt de séparer ces comportements sur deux éléments ?
Si tu ne trouves pas de bonne réponse à cette question, je te conseille une structure comme celle suivante :


Je place toutes les contraintes sur l'élément body, ce qui permet ensuite de pouvoir hériter de ses caractéristiques.

Smiley cligne
Sujet clos
Aller à