Comment définir une division à 100 % de la hauteur du corps, à l'exclusion de l'en-tête et du pied de page à hauteur fixe ?

Définition d'une division à 100 % de la hauteur du corps, à l'exclusion de l'en-tête et du pied de page à hauteur fixe

CSS permet un contrôle élégant sur la mise en page des pages Web. Une exigence courante consiste à afficher le contenu à 100 % de la hauteur du corps, tout en excluant l'espace occupé par un en-tête et un pied de page à hauteur fixe. Atteindre cet effet nécessite une implémentation CSS méticuleuse pour garantir la compatibilité entre navigateurs.

Une solution à toute épreuve consiste à définir le HTML et le corps sur une hauteur minimale : 100 % ;, en garantissant que la page se développe autant que possible. Ensuite, un div wrapper doit être créé avec un positionnement et un remplissage absolus pour s'adapter aux hauteurs d'en-tête et de pied de page. Dans ce wrapper, le div #content peut être défini sur min-height : 100 % ;, ce qui lui permet de remplir l'espace restant.

Pour garantir que l'en-tête et le pied de page restent fixes, margin-top : -50px ; et marge inférieure : -50px ; sont appliqués, annulant ainsi le rembourrage ajouté à l'emballage. Ces valeurs de marge négatives poussent l'en-tête et le pied de page en dehors du div wrapper, donnant l'illusion qu'ils sont suspendus au-dessus et en dessous du contenu.

Cette technique a été testée et s'est avérée efficace sur les navigateurs modernes et même sur Internet Explorer 8. avec Modernizr (ou en remplaçant simplement les éléments d'en-tête et de pied de page par des divs si Modernizr n'est pas disponible). Un extrait de code avec un exemple en direct est disponible pour plus de précisions.

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!