HTML頁尾始終固定在底部
阿新 • • 發佈：2018-12-15
頁尾固定在底部分兩種情況考慮，一種是有滑動欄的情況，一種是沒有的。後者比較簡單，直接加上定位屬性就是了，但是在頁面內容是擴充整個頁面以至於可以下滑瀏覽時，這時候單純加上定位屬性就不那麼可行了，鑑於此我寫了一個通用的js方法幫我搞定所有可能頁尾固定的情況。
廢話不多說，直接來乾貨
<!DOCTYPE html> <html> <head> <style> *{ margin: 0; padding: 0; } div{ vertical-align: middle; display: inline-block; float:left; text-align: center; } .footer{ height: 50px; width: 80%; background:#111; color:white; } </style> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> </script> <script> $(document).ready(function(){ function t(){ //判斷頁尾div底部到頁面頂端的實際距離是否小於頁面可見區域高度 if(h < document.body.clientHeight){ //當頁面剛好可以包容所有內容不需要下拉時直接加上個定位就是了，當然這裡也可以用絕對和相對屬性 //具體設定根據你實際情況來定吧 $(".footer").css({position:"fixed",left:"20%",bottom:"0px"}); return; } var a = $(document).scrollTop()+document.documentElement.clientHeight;//獲取頁面滑動偏移量加頁面可見區域的高度 //判斷頁尾div底部到頁面頂端的實際距離是否小於頁面滑動偏移量加頁面可見區域高度 if(a >= h){ //如果頁面內容太多，需要下滑展示的時候，給頁尾一個固定定位屬性 $(".footer").css({position:"fixed",left:"20%",bottom:"0px"}); }else{ //當頁面重新上滑頁尾需要被隱藏的時候移除它的定位屬性，這樣不論何時，它肯定是被頁面撐起來固定到底部展示的。 $(".footer").removeAttr("style"); } } var e = $(".footer");//獲取頁尾div的物件 var h = e.offset().top + e.height() ;//獲取頁尾偏移量加頁尾高度的值 //直接執行方法t t(); //在頁面大小改變時觸發方法t $(document).resize(t); //在頁面滑動時觸發方法t $(document).scroll(t); }); </script> </head> <body> <div style='height:1500px;width:20%;background:blue;'><span style="line-height: 500px;color:white;">左側導航欄</span></div> <div style='height:80px;width:80%;background:#ccc;'><span style="line-height: 80px;">這是一個頁頭</span></div> <div style='height:300px;width:30%;background:#AAA;'></div> <div style='height:150px;width:30%;background:#dda;'></div> <div style='height:150px;width:30%;background:#bbb;'></div> <div style='height:150px;width:20%;background:#eee;'></div> <div class='footer'><span style="line-height: 50px;">這是一個頁尾</span></div> </body> </html>
顯示效果為
本程式碼僅供參考，如有漏洞之處,歡迎指出。