將HTML的頁腳固定在屏幕下方
阿新 • • 發佈：2017-08-25
add height ddc width clas round *** blog func
/********************************************************************* * 將HTML的頁腳固定在屏幕下方 * 說明： * 處理的方法好像是比較多的，個人還是比較傾向於用JS進行處理。 * * 2017-8-25 深圳 龍華樟坑村 曾劍鋒 ********************************************************************/ 一、參考文檔：1. 將footer固定在頁面底部的實現方法 https://segmentfault.com/a/1190000004453249 二、采用代碼： 1. HTML： <body> <header>header</header> <main>main content</main> <footer>footer</footer> </body> 2. CSS： html,body{margin:0;padding: 0;} header{background-color: #ffe4c4;} main{background-color: #bdb76b;} footer{background-color: #ffc0cb;} /* 動態為footer添加類fixed-bottom */ .fixed-bottom {position: fixed;bottom: 0;width:100%;} 3. JS： $(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); });
將HTML的頁腳固定在屏幕下方