css : min-height n'est pas compatible avec la solution du navigateur Firefox

Lorsque nous structurons la page, nous la divisons généralement en trois sections : en-tête, corps et pied de page. Par exemple, la page suivante :

À ce stade, nous devons définir la hauteur minimale de la partie du corps pour éviter que la partie pied de page n'apparaisse au milieu de la page. Par exemple, la méthode d'écriture suivante :

.page-content-header {    　　
min-height: 5%;
}
.page-content-body {    　　
min-height: 100%;}
.page-content-footer {    　　
min-height: 5%;}

Cette méthode d'écriture fera en sorte que la partie du corps ait une hauteur qui remplit la taille de la page. La partie du pied de page sera naturellement à l'extrémité la plus basse de la page, et quand. le contenu de la partie du corps dépasse 100 %, la hauteur s'étendra automatiquement et il n'y aura pas de débordement.

Cependant, voici le problème. Firefox n'est pas compatible avec cette méthode d'écriture : 100% ne prend pas effet du tout. Nous pouvons utiliser la méthode suivante pour le rendre compatible :

.page-content-body {    　　
min-height: 100%;    　　
/*火狐兼容*/    　　
min-height: 600px !important;}
.page-content-body:after {   　　
content:"";　　
visibility:hidden;　　
display:block;　　
clear:both;　　
height:0px;}

Nous utilisons d'abord !important pour pirater le navigateur Firefox, définissons une hauteur minimale de 600 px, puis utilisons le pseudo élément : after pour effectuer un nettoyage de style, de sorte que lorsque le contenu dépasse le minimum hauteur, la hauteur augmentera en conséquence.

Nous définissons l'affichage du type de boîte d'affichage sur un bloc d'éléments au niveau du bloc, définissons clear pour ne pas autoriser les éléments flottants sur les côtés gauche et droit, et nous avons inséré le contenu généré. Le contenu est vide, puis la hauteur est fixée à 0, rendant l'élément invisible.

Cela permettra à Firefox d'atteindre une hauteur et un contenu minimum au-delà de l'adaptatif.

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!