在設計網站的時候，如果你某個頁面的內容沒有滿屏，那你的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
;
}
這里再提供一種方法：完全通過css達到的。
<
footer
class
=
"footer"
>
<
div
class
=
"container"
>
</
div
>
</
footer
>
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
;
}