Comment fixer le pied de page en bas avec CSS

Comment réparer le pied de page en bas avec CSS : assurez-vous d'abord que le code HTML, le corps et le conteneur de la page correspondent à [hauteur : 100 %], puis utilisez le positionnement relatif [bas : 0] pour corriger le pied de page ; pied de page au bas de la page.

L'environnement d'exploitation de ce tutoriel : Système Windows 10, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

Analyse des principes :

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Le code HTML, le corps et le conteneur de la page doivent tous répondent à la hauteur : 100 %, afin qu'il puisse occuper tout l'écran (page). Le pied de page utilise un positionnement relatif bottom : 0 et est fixé au bas de la page. Le conteneur de la page principale doit définir un remplissage inférieur plus grand. supérieure ou égale à la hauteur du pied de page. Le but est de La hauteur du pied de page est calculée dans le conteneur de page, afin que le pied de page soit toujours fixé en bas de la page.

Implémentation :

HTML

<div id="container">
    <div id="header">Header Section</div>
    <div id="page" class="clearfix">
        <div id="left">Left Sidebar</div>
        <div id="content">Main content</div>
        <div id="right">Right sidebar</div>
    </div>
    <div id="footer">Footer Section</div>
</div>

La seule chose à noter ici est que le conteneur de pied de page est inclus dans le conteneur conteneur.

CSS

html,body {
  margin: 0;
  padding:0;
  height: 100%;
}
#container {
  min-height:100%;
  height: auto !important;
  height: 100%; /*IE6不识别min-height*/
  position: relative;
}
#header {
    background: #ff0;
    padding: 10px;
}
#page {
    width: 960px;
    margin: 0 auto;
    padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;/*脚部的高度*/
    background: #6cf;
    clear:both;
}
/*=======主体内容部分省略=======*/

D'après le code CSS, nous voyons que le corps de la page a un ensemble padding-bottom, et il est cohérent avec la hauteur du pied de page. Margin-bottom ne peut pas être utilisé ici à la place de padding-bottom.

Cette solution présente un inconvénient : le pied de page doit avoir une hauteur fixe, et la page doit définir un padding-bottom supérieur ou égal à cette hauteur. Si le pied de page n’a pas une hauteur fixe ou si le pied de page doit être adapté, alors cette solution n’est pas adaptée.

Recommandations associées : Tutoriel CSS

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!