HTML et hauteur du corps : « hauteur : 100 % » contre « min-hauteur : 100 % » – Lequel devriez-vous utiliser ?

Hauteur par rapport à la hauteur minimale pour les éléments HTML et corps

Lors de la conception des mises en page, de nombreux développeurs définissent la hauteur des éléments HTML et du corps à 100 %. Cependant, cette approche peut parfois rencontrer des problèmes. Cet article explore les différences entre height : 100 % et min-height : 100 % pour ces éléments et fournit des recommandations pour leur utilisation.

L'arrière-plan et les éléments HTML et corps

Les éléments HTML et body manquent de hauteur inhérente. Par défaut, ils sont définis sur height: auto. Lorsque la hauteur : 100 % est appliquée à ces éléments, la hauteur est déterminée à partir de la fenêtre d'affichage, leur permettant de remplir toute la fenêtre du navigateur.

Hauteur : 100 % vs. Hauteur minimale : 100 %

• hauteur : 100 % : Ce paramètre fixe la hauteur d'un élément à 100 % de son conteneur parent. L'appliquer à la fois au HTML et au corps garantit qu'ils remplissent toute la fenêtre d'affichage, mais cette approche peut empêcher le corps de s'étendre pour accueillir du contenu qui dépasse la hauteur de la fenêtre d'affichage, laissant potentiellement un espace notable.
• min-height : 100%: Ce paramètre définit une hauteur minimale pour un élément. L'appliquer à la fois au HTML et au corps permet au corps de s'étendre selon les besoins mais ne garantit pas qu'il remplira la fenêtre d'affichage si le contenu est insuffisant.

Recommandation : Utiliser la hauteur : 100 % sur le HTML. et hauteur minimale : 100 % sur le corps

Pour les images d'arrière-plan qui couvrent toute la fenêtre du navigateur, l'approche recommandée consiste à définir la hauteur : 100 % sur le html et min-height : 100 % sur le corps. Cela garantit que le HTML remplit toute la fenêtre d'affichage, fournissant un canevas d'arrière-plan, tandis que le corps se développe verticalement selon les besoins, s'adaptant au contenu.

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!