L'idée de base est

d'envisager d'abord de configurer un div conteneur dans la couche externe, avec l'identifiant défini sur #container, de sorte que sa hauteur soit la hauteur de la fenêtre du navigateur, puis de définir le div #footer comme div enfant de # conteneur, et utilisez un positionnement absolu pour le faire épingler à l'extrémité inférieure du #container pour obtenir l'effet souhaité.

Cliquez ici pour voir l'effet de la page de cas. Modifiez la hauteur et la largeur du navigateur pour voir l'effet de la partie Pied de page.

Implémentation du code

: Considérons d'abord la structure HTML Le code HTML de cette page de démonstration est très simple.

body,html {
marge : 0 ;
remplissage : 0 ;
police : 12px/1,5 arial ;
hauteur : 100 % ;
}
#conteneur {
hauteur min : 100 % ;
position : relative ;
}
#contenu {
remplissage : 10 px ;
rembourrage inférieur : 60 px ;
/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#pied de page {
position : absolue ;
bas : 0 ;
remplissage : 10px 0 ;
couleur d'arrière-plan : #AAA ;
largeur : 100 % ;
}
#pied de page h1 {
police : 20px/2 Arial ;
marge : 0 ;
remplissage : 0 10 px ;
}
1 : Tout d'abord, définissez la hauteur (attribut height) des éléments html et body à 100 % (ligne 5). Cela garantira d'abord que la hauteur de l'élément racine remplit toute la fenêtre du navigateur, puis la hauteur de #container peut le faire. remplir toute la fenêtre du navigateur. Quant à savoir pourquoi les éléments html et body sont définis en même temps, c'est parce que Firefox et IE considèrent que l'élément racine est différent, ils sont donc définis ici.

2 : Définissez ensuite la hauteur de #container à 100 % (ligne 8), mais notez que l'attribut "min-height" est utilisé ici à la place de l'attribut height ordinaire. C'est parce que nous devons considérer que if # If le contenu. dans le contenu augmente et sa hauteur dépasse la hauteur de la fenêtre du navigateur, alors si la hauteur de #container est toujours de 100 %, #footer sera toujours positionné à l'extrémité inférieure de la fenêtre du navigateur, couvrant ainsi le contenu de #content. Le but de l'utilisation de l'attribut min-height est de faire en sorte que la hauteur de #container soit "au moins" la hauteur de la fenêtre du navigateur. Lorsque le contenu à l'intérieur augmente, sa hauteur augmente également.

Cependant, il convient de noter que dans Firefox et IE7, l'attribut min-height est pris en charge, tandis que dans IE6, l'attribut min-height n'est pas pris en charge. Cependant, la « coïncidence » est que dans IE6, l'attribut min-height le sera. être interprété comme l'attribut height. , mais l'effet de l'attribut height dans IE6 est l'effet que min-height devrait avoir à l'origine, c'est-à-dire que dans IE6, la hauteur du div enfant augmentera la hauteur du div parent. . Cela peut donc exactement produire l’effet souhaité dans IE6, IE7 et Firefox.

3 : Ensuite, définissez #container sur le positionnement relatif (ligne 9), afin d'en faire la référence de positionnement du #footer à l'intérieur, qui est ce qu'on appelle "l'élément ancêtre le plus récemment positionné".

4 : Réglez ensuite #foooter sur le positionnement absolu (ligne 17) et collez-le au bas de #container (ligne 18).

5 : Mais veuillez noter que si nous collons #foooter au bas de #container, il chevauchera en fait le div #content ci-dessus. Afin d'éviter de couvrir le contenu dans #content, nous le définissons dans #contetn en supprimant le remplissage. sur le côté inférieur et en rendant la valeur de padding-bottom égale à la hauteur de #footer (ligne 13), vous pouvez vous assurer que le texte de #content est évité Lors du calcul de cette hauteur, faites attention à la méthode de calcul donnée dans le. commentaires dans le code (ligne 14).