首页 > 代码库 > 网站设计:将Footer固定在浏览器底部
网站设计:将Footer固定在浏览器底部
在设计网站的时候,如果你某个页面的内容没有满屏,那你的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"
>
<
p
class
=
"text"
>版权所有,翻版不究! https://www.iteblog.com</
p
>
</
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
;
}
网站设计:将Footer固定在浏览器底部