Eine einfache Möglichkeit, die HTML-Fußzeile am Ende der Seite zu implementieren

Anforderungen: Manchmal, wenn der Seiteninhalt kurz ist und die Höhe des Browsers nicht unterstützen kann, Sie aber möchten, dass sich die Fußzeile am unteren Ende des Fensters befindet.

Idee: Die Mindesthöhe der übergeordneten Ebene der Fußzeile beträgt 100 %, und die Fußzeile ist relativ zur Position so eingestellt, dass sie absolut unten ist (unten: 0). der übergeordneten Ebene muss die Höhe der Fußzeile in der übergeordneten Ebene reserviert werden.

HTML-Code:

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

CSS lautet wie folgt:

#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预留的空间*/     
}

Zurzeit andere Browser Es kann normal angezeigt werden, aber IE 6 muss separat verarbeitet werden:

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

Die oben beschriebene einfache Implementierungsmethode zum Platzieren der HTML-Fußzeile am Ende der Seite ist das, was ich habe Der Inhalt ist vollständig, ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere verwandte Artikel zur einfachen Implementierungsmethode zum Platzieren der HTML-Fußzeile am Ende der Seite finden Sie auf der chinesischen PHP-Website!