Explication détaillée de la façon dont le pied de page est toujours en bas de la page Web-tutoriel HTML-php.cn

Explication détaillée de la façon dont le pied de page est toujours en bas de la page Web

高洛峰

Libérer： 2017-03-20 13:38:08

original

2275 Les gens l'ont consulté

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>

Copier après la connexion

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

Explication détaillée de la façon dont le pied de page est toujours en bas de la page Web

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;}

Copier après la connexion

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;}

Copier après la connexion

<🎜. >

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 :

content

content

content< ;br />
Content

Identique à ci-dessus, mais N lignes sont omises ci-dessous. . .

Code CSS :

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;}

Copier après la connexion

Ajouter padding-bottom au contenu comme ci-dessus

Pièce jointe :

Quand il y a moins de contenu :