html 頁面 底部固定 footer

我們在編寫html頁面的時候總是希望footer 永遠固定在最底部，最下面的footer 如果我們采用絕對定位 當内容的告訴大于螢幕的高度的時候，我們發現底部這個時候就會一直保持在螢幕的底部，甚至将内容覆寫

當我們使用相對定位的時候，如果内容的高度是大于螢幕的高度還好，如果小于螢幕的高度，發現底部就不固定在底部了，而是在内容的下面，有時候到螢幕的中間了

是以無論采用相對定位還是絕對定位，都沒有辦法實作我們想要的結果，内容的最底部和螢幕的最底部，我們隻有通過js來動态的控制，實作footer 始終在對底部，那麼這個js 應該怎麼寫

// 解決底部固定的問題
function autoFooter() {
  
  var flag=true;
  $("#footer").css({"position":"absolute"})

  if(flag){
      setTimeout(function(){
      console.log("...............底部自動定位1000......");
      // 擷取内容的高度
      var bodyHeight = $("body").height();
      // 擷取顯示屏的高度
      var iHeight = document.documentElement.clientHeight || document.body.clientHeight;
      
      var footerHeight=$("#footer").height();
      flag=false;

      if (bodyHeight+footerHeight > iHeight) {
        $("#footer").css({"position":"relative","bottom":"0px","left":"0px","right":"0px"});
      }else{
        $("#footer").css({"position":"absolute","bottom":"0px","left":"0px","right":"0px"});
      }
      
    }, 1000);
  }
  
  if(flag){
       setTimeout(function(){
         
           console.log("...............底部自動定位500......");

        // 擷取内容的高度
        var bodyHeight = $("body").height();
        // 擷取顯示屏的高度
        var iHeight = document.documentElement.clientHeight || document.body.clientHeight;
      
        var footerHeight=$("#footer").height();
      
        flag=false;
        if (bodyHeight+footerHeight > iHeight) {
        $("#footer").css({"position":"relative","bottom":"0px","left":"0px","right":"0px"});
        }else{
        $("#footer").css({"position":"absolute","bottom":"0px","left":"0px","right":"0px"});
        }
      }, 500);
  }
}      

這段代碼就是就是根據内容的高度和螢幕的高度大小來動态的設定相對定位和自動定位

當内容的高度比螢幕的高度要大的時候，要使用相對定位

如果内容的高度小于螢幕的高度，要用相對定位

這個代碼需要放在一個通用的js，在每個頁面都要引入，定位在頁面加載的時候調用

并且底部 的id = "footer" 這個根據自己的需要設定