Comment placer la balise footer en bas de page

Cette fois je vais vous montrer comment placer la balise footer en bas de page. Quelles sont les précautions pour mettre la balise footer en bas de page. jetons un coup d'oeil.

Exigences : Parfois, lorsque le contenu de la page est trop court pour supporter 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 %. Le pied de page est défini pour être absolument en 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 :

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

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 peuvent s'afficher normalement, mais IE 6 doit être traité séparément :

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

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment rendre le contenu d'une page Web mobile adaptatif

Comment gérer le débordement de contenu dans les tableaux

Quelles sont les différences entre iframe et frame en HTML

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!