純CSS實現Footer固定底部,超過一屏自動撐開打賞

日常開發中經常遇到網頁內容過少時底部版權區域上浮,網頁是經典的Header、Content、Footer三部分組成的情況下,之前要么采用js修改Footer的position,高度低于一屏時采用fixed,超出改用static,但是這樣會出現抖動,也試過初始化時設置Content的min-height,但終歸是使用了js,不太完美,CSS的也試過使用margin-bottom:-10000px;padding-bottom:10000px的方法填充底部顏色,但效果不見得有多好看。

最近又遇到此類問題,嘗試采用之前提到過的CSS水平垂直居中方法來解決,最終找到比較靠譜的方法,就此總結一下,以備后用。

廢話不說,直接上代碼,以下為CSS,采用border-box,所以IE7下面無效,由于工作原因,只測試到IE8,沒考慮低版本瀏覽器。

fixed_footer_code

* { margin: 0; padding: 0;box-sizing: border-box;}
html,body { height: 100%;}
.header { height: 60px; margin-bottom: -60px; background: #1381cc; color: #FFF; position: relative;}
.content { background: #CCC; min-height: 100%; padding: 60px 0 60px;}
.footer { height:60px; margin-top: -60px; background: #0c4367; color: #FFF;}

Dom結構與樣式如上圖,由于博客編碼問題,不再貼HTML代碼,且這里僅簡單示范,具體可自己嘗試,大概思路就是通過給html、body都設置100%的高度,確定body下內容設置min-height有效,然后設置主體部分min-height為100%,此時若沒有header、footer則剛好完美占滿全屏(參考《div絕對居中、寬高自適應、多欄寬度自適應》),但是有了這兩個,只能另尋他路,由于高版本瀏覽器對box-sizing的支持,我們可以在100%的高度中通過padding給header、footer空出兩部分空白區域,再通過給header設置等同于自身高度的負值margin-bottom,給footer設置等同于自身高度的負值margin-top,就完美的把兩者移回可見區域,如此以來,既滿足content部分不滿一屏時footer在底部,又滿足了,超過一屏時footer被撐開的需求。

注:這里為了方便,使用*重置了所有樣式,正常工作中不推薦。

下面是各種情況下頁面展示情況。

一屏、不滿一屏時

fixed_footer_demo1

超過一屏時頂部

fixed_footer_demo2

超過一屏時底部

fixed_footer_demo3

網上查了下資料,發現早就有類似實現方案,基本上類似,通過演變,可以將footer以外的部分再用wrap包裹起來,內部設置padding-bottom,footer相同的使用margin-top,如此以來不用使用border-box,理論上可向下兼容至更低版本IE,但手上沒有更低版本的IE,簡單通過IEtester測試一下,可兼容至IE7,簡單代碼如下。

fixed_footer_code_new

另外提供一份國外設計達人的方案,網上搜羅到的,純CSS實現,兼容至IE6以及更低版本,IETester測試到IE5,代碼如下圖。

fixed_footer_code_ie6

純CSS實現Footer固定底部,超過一屏自動撐開
文章《純CSS實現Footer固定底部,超過一屏自動撐開》二維碼
  • 微信打賞
  • 支付寶打賞

已有9條評論

  1. 樸人博客

    多多交流,我建了個前端群,沒事可以加一下,在右側有鏈接

    2016-03-17 23:54 回復
  2. 樸人博客

    多多交流

    2016-03-17 23:53 回復
  3. vultr

    這個還是比較實用的。

    2015-11-13 10:50 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖