標籤：document 工具 ott css fun fixed 包括 inner 處理
/********************************************************************* * 將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的頁尾固定在螢幕下方
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
