html的footer置于頁面最底部的簡單實現(xiàn)方法
發(fā)布時間：2016-05-13 09:07:38 作者：佚名 
我要評論
我要評論下面小編就為大家?guī)硪黄猦tml的footer置于頁面最底部的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
需求：有時候，當頁面內容較短，撐不開瀏覽器高度，但是又希望footer能在窗口最低端。
思路：footer的父層的最小高度是100%，footer設置成相對于父層位置絕對（absolute）置底（bottom：0），父層內要預留footer的高度。
html代碼：
XML/HTML Code復制內容到剪貼板
- <!-- 父層 -->
- <div id="wapper">
- <!-- 主要內容 -->
- <div id="main-content">
- </div>
- <!-- 頁腳 -->
- <div id="footer">
- </div>
- </div>
CSS如下：
CSS Code復制內容到剪貼板
- #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預留的空間*/
- }
這時候，其它瀏覽器上都能正常顯示了，但是IE 6要另外處理：
CSS Code復制內容到剪貼板
- <!--[if IE 6]->
- <style>
- #wapper{height:100%;} /* IE在高度不夠時會自動撐開層*/
- </style>
- <![endif]-->
以上這篇html的footer置于頁面最底部的簡單實現(xiàn)方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
- 我們經常會遇到這樣的問題：如何用css來實現(xiàn)底部元素可“粘住底部”的效果，對于“粘住底部”，本篇文章就來介紹一下。非常具有實用價值，需要的朋友可以參考下2018-10-10
本篇文章主要介紹了詳解CSS五種方式實現(xiàn)Footer置底，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-16- 下面小編就為大家?guī)硪黄肅SS使footer固定在頁面底部的實例代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-13
詳解HTML5將footer置于頁面最底部的方法(CSS+JS)
這篇文章主要介紹了詳解HTML5將footer置于頁面最底部的方法(CSS+JS)的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-11
