height : 100% ou min-height : 100% pour les éléments html et body ?

Question

Lors de la conception des mises en page, j'ai défini l'option html, body éléments height a 100% mais dans certains cas, cela échoue, alors que faut-il utiliser ?

html, body {
   height: 100%;
}

ou

html, body {
   min-height: 100%;
}

Il ne s'agit pas d'une opinion, car chaque méthode a ses propres défauts, alors quelle est la méthode recommandée et pourquoi ?

Answer 1

Si vous essayez d'appliquer des images d'arrière-plan à html y body qui remplissent toute la fenêtre du navigateur, non plus. Utilisez plutôt ceci :

html {
   height: 100%;
}

body {
   min-height: 100%;
}

Mon raisonnement est le suivant aquí (où j'explique de manière holistique comment appliquer les arrière-plans de cette manière) :

Incidemment, la raison pour laquelle vous devez spécifier height y min-height a html y body respectivement parce qu'aucun des deux éléments n'a de hauteur intrinsèque. Les deux sont height: auto par défaut. C'est le viewport qui a une hauteur de 100%, donc height: 100% est prise dans la fenêtre d'affichage, puis appliquée à body au minimum pour permettre le défilement du contenu.

La première façon, en utilisant height: 100% sur les deux, empêche body de s'étendre avec son contenu lorsqu'il commence à dépasser la hauteur de la fenêtre d'affichage. Techniquement, cela ne prévenir le contenu du défilement, mais cela provoque body de laisser un espace sous le pli, ce qui est généralement indésirable.

La deuxième façon, en utilisant min-height: 100% sur les deux, ne cause pas body pour s'étendre à la hauteur totale de html parce que min-height avec un pourcentage ne fonctionne pas sur body sauf si html dispose d'une height .

Dans un souci d'exhaustivité, section 10 de CSS2.1 contient tous les détails, mais c'est une extrêmement C'est une lecture alambiquée, vous pouvez donc la sauter si vous n'êtes pas intéressé par ce que j'ai expliqué ici.

Answer 2

Vous pouvez utiliser la hauteur de la fenêtre d'affichage ( vh ) :

body {
    min-height: 100vh;
}

Elle est relative à l'écran, et non à la hauteur du parent, donc vous n'avez pas besoin de html height : 100%.