Hauteur ou hauteur minimale : quelle est la meilleure solution pour les mises en page HTML et des éléments de corps ?

Hauteur par rapport à la hauteur minimale pour les éléments HTML et corps dans les mises en page

Lors de la définition de la mise en page, les développeurs utilisent généralement l'une ou l'autre hauteur : 100 % ou min-height : 100 % pour les éléments html et body. Cependant, ces méthodes échouent souvent dans certains scénarios, laissant les concepteurs se demander quelle approche est préférable.

Hauteur : 100 %

Utilisation de la hauteur : 100 % sur le HTML et le corps les éléments les fixent à la hauteur de la fenêtre. Cette méthode applique efficacement des images d’arrière-plan qui remplissent toute la fenêtre du navigateur. Cependant, cela empêche le corps de s'étendre avec son contenu croissant, ce qui entraîne des espaces indésirables sous le pli de la fenêtre.

Hauteur minimale : 100 %

Spécification de la hauteur minimale : 100 % sur les éléments HTML et body garantit que le corps peut s'étendre jusqu'à la hauteur de la fenêtre d'affichage, permettant ainsi le défilement du contenu. Cependant, cette méthode ne fonctionne que si le HTML a une hauteur explicite.

Approche recommandée

Pour les images d'arrière-plan qui remplissent la fenêtre du navigateur, la solution recommandée est :

html {
  height: 100%;
}

body {
  min-height: 100%;
}

Cette approche permet au HTML de déterminer la hauteur de la fenêtre d'affichage et de l'agrandir selon les besoins, évitant ainsi les espaces et le contenu. overflow.

Considérations supplémentaires

Html et body manquent de hauteur inhérente, donc la hauteur explicite : auto est attribuée par défaut. Les images d'arrière-plan appliquées à ces éléments doivent être explicitement spécifiées dans le code HTML car le code HTML dérive sa hauteur de la fenêtre d'affichage.

Bien que min-height : 100 % sans hauteur HTML explicite puisse conduire à un comportement inattendu, la compréhension des spécifications CSS ( la section 10 de CSS2.1) fournit une explication détaillée de ces détails techniques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!