網站設計:將Footer固定在瀏覽器底部

標籤：ber   ref   padding   20px   螢幕解析度   高度   containe   ott   ring   

在設計網站的時候，如果你某個頁面的內容沒有滿屏，那你的footer會離瀏覽器底部很遠，整體看起來很難看，這裡用JavaScript提供一種方法來將footer固定在瀏覽器底部。

function fixFooter(){
    var mainHeight = document.getElementById(‘main‘).offsetHeight;
    var  height = document.documentElement.clientHeight
                         - document.getElementById("header").offsetHeight
                         - document.getElementById("footer").offsetHeight;
    if(mainHeight  < height ){
        document.getElementById(‘main‘).style.height= height + "px";
    }
}

其中，main是你網頁內容的id，header是菜單的id,footer是footer的id。當網站內容的高度小於多少時，那麼擷取header和footer的高度，並用document.documentElement.clientHeight減去他們，剩下的就是main的高度。
　　但是當你運行代碼的時候，你會發現footer先是離底部有點距離，然後才到底部的，這樣看起來很難看，可以加上下面語句隱藏這個過程，使得網頁一開啟footer就在底部。

document.getElementById(‘main‘).style.overflow="hidden";

我們可以通過JavaScript擷取很多關於瀏覽器的屬性，這裡列出各個屬性的擷取及其含義。
網頁可見地區寬： document.body.clientWidth
網頁可見地區高： document.body.clientHeight
網頁可見地區寬： document.body.offsetWidth (包括邊線的寬)
網頁可見地區高： document.body.offsetHeight (包括邊線的高)
網頁本文全文寬： document.body.scrollWidth
網頁本文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁本文部分上： window.screenTop
網頁本文部分左： window.screenLeft
螢幕解析度的高： window.screen.height
螢幕解析度的寬： window.screen.width
螢幕可用工作區高度： window.screen.availHeight
螢幕可用工作區寬度： window.screen.availWidth

當然，如果你想讓footer一直在瀏覽器底部，那麼可以通過CSS來解決

#footer{ 　　 position : fixed ; 　　 right : 0 ; 　　 left : 0 ; 　　 z-index : 1030 ; 　　 bottom : 0 ; 　　 margin-bottom : 0 ; } 這樣footer會一直在瀏覽器底部。

　　這裡再提供一種方法：完全通過css達到的。

< footer class = "footer" >        < div class = "container" >          < p class = "text" >著作權，翻版不究! https://www.iteblog.com</ p >        </ div > </ footer >下面是css： html {    position : relative ;    min-height : 100% ; } body {    margin-bottom : 60px ; } .footer {    position : absolute ;    bottom : 0 ;    width : 100% ;    height : 60px ;    background-color : #f5f5f5 ; }  .container {    width : auto ;    max-width : 680px ;    padding : 0 15px ; } .container .text {    margin : 20px 0 ; }

 

網站設計:將Footer固定在瀏覽器底部