Maison > Article > interface Web > Explication détaillée de la façon dont le pied de page est toujours en bas de la page Web
Explication détaillée de la façon dont le pied de page est toujours en bas de la page Web
- 高洛峰original
- 2017-03-20 13:38:082239parcourir
La dernière fois, j'ai dit que le début et la fin de la page Web devaient être séparés dans un fichier séparé et partagés par toutes les pages Web. Cependant, j'ai trouvé que dans certaines méthodes, la queue. suivra la tête immédiatement. Le contenu est pressé ci-dessous. . De plus, si le contenu de certaines pages est petit, la queue ne peut pas être pressée vers le bas, nous étudierons donc cette fois comment maintenir la queue en bas. .
Mettez d'abord le code html :
<body> <div class="header">头部</div> <div class="content"> 内容<br /> 内容<br /> 内容<br /> 内容<br /> 同上，以下省略N行。。。 </div> <div class="footer">尾部</div> </body>
Méthode 1 : En fait, cette méthode doit toujours être située en bas de la fenêtre du navigateur, et non en en bas de la page Web La méthode est similaire à la navigation sur certaines pages Web et il y a toujours une ligne d'informations rapides en dessous lorsque vous n'êtes pas connecté ou enregistré. C'est probablement la même chose que le bouton de retour en haut . . .
Dernière image : Cela ressemble à ceci
Code CSS :
body{position:relative;height:100%;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;position: fixed;left: 0;bottom: 0;}Vous devez définir une hauteur fixe pour le pied de page
Méthode 2 : Il s'agit d'une méthode pour positionner le pied de page en bas de la page Web. Positionnement absolu
body{position:relative;height:100%;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;position: absolute;left: 0;bottom: 0;}Ajouter la partie milieu du contenu Le but de l'ajout de padding-bottom est de permettre au contenu d'être entièrement affiché sans être couvert par le pied de page, et également de définir une hauteur fixe pour le pied de page
Méthode 3 : Hauteur du pied de page fixemargeValeurs négatives
le code HTML est différent :header
content
content
content< ;br />
Content
body{height: 100%;}
.wrap{min-height: 100%;}
.header{height: 100px;background-color: greenyellow;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;margin-top: -100px;}Ajouter padding-bottom au contenu comme ci-dessus
Pièce jointe :
Quand il y a moins de 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!