Un moyen simple d'implémenter le pied de page HTML en bas de page

Exigences : Parfois, lorsque le contenu de la page est court et ne peut pas prendre en charge la hauteur du navigateur, mais que vous souhaitez que le pied de page soit à l'extrémité la plus basse de la fenêtre.

Idée : La hauteur minimale du calque parent du pied de page est de 100 %, et le pied de page est défini pour être absolument bas (bas : 0) par rapport à la position du calque parent, la hauteur du pied de page doit être réservée dans le calque parent.

code html :

<!-- 父层 -->     
<p id="wapper">     
    <!-- 主要内容 -->     
    <p id="main-content">     
    </p>     
    <!-- 页脚 -->     
    <p id="footer">     
    </p>     
</p>

Le CSS est le suivant :

#wapper{     
    position: relative;   /*重要！保证footer是相对于wapper位置绝对*/     
    height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/     
    min-height: 100%  /* IE6不支持，IE6要单独配置*/     
}     
#footer{     
   position: absolute;  bottombottom: 0; /* 关键 */     
   left:0; /* IE下一定要记得 */     
   height: 60px;         /* footer的高度一定要是固定值*/     
}     
#main-content{     
   padding-bottom: 60px; /*重要！给footer预留的空间*/     
}

À l'heure actuelle, les autres navigateurs Il peut être affiché normalement, mais IE 6 doit être traité séparément :

<!--[if IE 6]->     
<style>     
#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/     
</style>     
<![endif]-->

La méthode d'implémentation simple ci-dessus consistant à placer le pied de page HTML en bas de la page est tout l'éditeur a partagé avec vous. Le contenu est complet, j'espère qu'il pourra vous donner une référence, et j'espère aussi que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles sur la méthode d'implémentation simple consistant à placer le pied de page HTML en bas de la page, veuillez faire attention au site Web PHP chinois !