方法一：footer高度固定+絕對定位 HTML代碼： CSS代碼： 實現的效果： 首先，設置body的高度至少充滿整個屏幕，並且body作為footer絕對定位的參考節點； 其次，設置main（footer前一個兄弟元素）的padding-bottom值大於等於footer的height值，以保證 ...
方法一：footer高度固定+絕對定位
HTML代碼：
<body> <header>頭部</header> <main>中間內容</main> <footer>底部信息</footer> </body>
CSS代碼：
*{ margin:0; padding:0; } html{ height:100%; } body{ min-height:100%; margin:0; padding:0; position:relative; } header{ background: #000; text-align: center; height:50px; line-height: 50px; color:#fff; } main{ /* main的padding-bottom值要等於或大於footer的height值 */ padding-bottom:100px; background:#ccc; text-align: center; } footer{ position:absolute; color:#fff; bottom:0; width:100%; height:100px; line-height:100px; text-align:center; background-color: #000; }
實現的效果：
- 首先，設置body的高度至少充滿整個屏幕，並且body作為footer絕對定位的參考節點；
- 其次，設置main（footer前一個兄弟元素）的padding-bottom值大於等於footer的height值，以保證main的內容能夠全部顯示出來而不被footer遮蓋；
- 最後，設置footer絕對定位，並
設置height為固定高度值。
優點：footer一直存在於底部。
缺點：中間區域main如果內容不夠，不能撐滿頁面的中間區域。
方法二：footer高度固定+margin負值
HTML代碼：
<body> <div class="container"> <header>頭部</header> <main>中間內容</main> </div> <footer>底部信息</footer> </body>
CSS代碼：
*{ margin:0; padding:0; } html,body{ height:100%; } .container{ min-height:100%; } header{ background: #000; text-align: center; height:50px; line-height: 50px; color:#fff; } main{ padding-bottom:100px; background:#ccc; text-align: center; } footer{ color:#fff; height:100px; line-height:100px; margin-top:-100px; text-align:center; background-color: #000; }
此方法把footer之前的元素放在一個容器裡面，形成了container和footer併列的結構：
首先，設置.container的高度至少充滿整個屏幕；
其次，設置main（.container最後一個子元素）的padding-bottom值大於等於footer的height值；
最後，設置footer的height值和margin-top負值。
展示效果跟第一種是一樣的，缺點跟第一種也是一樣的。
方法三：footer高度任意+js
HTML代碼：
<header>頭部</header> <main>中間內容</main> <footer>底部信息</footer>
CSS代碼：
*{ margin:0; padding:0; } html{ height:100%; } body{ min-height:100%; margin:0; padding:0; position:relative; } header{ background: #000; text-align: center; height:50px; line-height: 50px; color:#fff; } main{ /* main的padding-bottom值要等於或大於footer的height值 */ background:#ccc; text-align: center; } footer{ color:#fff; width:100%; height:100px; line-height:100px; text-align:center; background-color: #000; } /* 動態為footer添加類fixed-bottom */ .fixed-bottom { position: fixed; bottom: 0; width:100%; }
JS（jquery）代碼：
$(function(){ function footerPosition(){ $("footer").removeClass("fixed-bottom"); var contentHeight = document.body.scrollHeight,//網頁正文全文高度 winHeight = window.innerHeight;//可視視窗高度，不包括瀏覽器頂部工具欄 if(!(contentHeight > winHeight)){ //當網頁正文高度小於可視視窗高度時，為footer添加類fixed-bottom $("footer").addClass("fixed-bottom"); } } footerPosition(); $(window).resize(footerPosition); });
常用的純css實現footer sticker
CSS代碼：
html, body, #sticker {height: 100%;} body > #sticker {height: auto; min-height: 100%;} #stickerCon {padding-bottom: 40px;} #footer {margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}
HTML代碼：
<div id="sticker"> <div id="stickerCon"></div> </div> <div id="footer">footer</div>
