HTML et hauteur du corps : 100 % ou hauteur minimale : 100 % – Lequel dois-je utiliser ?

Hauteur par rapport à la hauteur minimale pour les éléments HTML et corps : comprendre les différences

Dans la conception Web, obtenir une mise en page qui remplit la fenêtre du navigateur peut être crucial. Les développeurs définissent souvent la hauteur des éléments HTML et Body à 100 %, s'attendant à ce qu'elle s'étende sur toute la taille de la fenêtre. Cependant, dans certains scénarios, cette approche échoue. Cet article vise à faire la lumière sur ce problème et à fournir la solution recommandée.

Pourquoi la hauteur : 100 % ou la hauteur minimale : 100 % peuvent échouer

Régler le code HTML et le corps sur la hauteur : 100 % empêche l'élément de corps de s'étendre au-delà de la hauteur de la fenêtre. Cela laisse un vide notable en bas de page, souvent un résultat indésirable.

Par contre, min-height : 100% sur les deux éléments ne fonctionne pas car min-height avec un pourcentage ne s'applique pas à l'élément body sauf si HTML a une hauteur explicite définie.

La solution recommandée : Hauteur : 100 % sur HTML, Min-Height : 100 % sur Body

Pour répondre à ces limitations, il est recommandé de définir html sur hauteur : 100 % et corps sur min-height : 100 %. Cela permet :

• html de s'étendre jusqu'à la hauteur de la fenêtre d'affichage.
• body de s'étendre pour s'adapter au contenu de la page, tout en conservant une hauteur minimale de 100 %.

Images d'arrière-plan : un cas particulier

Lors de l'application d'images d'arrière-plan au HTML et au corps qui remplissent la fenêtre du navigateur, aucune hauteur : 100 % ni min-height : 100 % fonctionneront efficacement. Au lieu de cela, il est recommandé d'utiliser l'approche suivante :

html {
  height: 100%;
}

body {
  min-height: 100%;
}

Cela permet à l'image d'arrière-plan de couvrir toute la fenêtre du navigateur sans aucun espace ni débordement.

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!