网站设计:将Footer固定在浏览器底部 – 过往记忆

IT英文电子书免费下载频道上线啦，共收录4300+本IT方面的电子书，欢迎访问http://books.iteblog.com

IntelliJ IDEA 15在线激活

【最新可访问的Hosts文件-2016年02月21日更新】：【最新可访问的Hosts文件-2016年02月21日更新】

---

　　在设计网站的时候，如果你某个页面的内容没有满屏，那你的footer会离浏览器底部很远，整体看起来很难看，这里用JavaScript提供一种方法来将footer固定在浏览器底部。

1	function fixFooter(){

2	var mainHeight = document.getElementById('main').offsetHeight;

3	var  height = document.documentElement.clientHeight

4	- document.getElementById("header").offsetHeight

5	- document.getElementById("footer").offsetHeight;

6	if(mainHeight  < height ){

7	document.getElementById('main').style.height= height + "px";

8

}

9

}

　　其中，main是你网页内容的id，header是菜单的id,footer是footer的id。当网站内容的高度小于多少时，那么获取header和footer的高度，并用document.documentElement.clientHeight减去他们，剩下的就是main的高度。
　　但是当你运行代码的时候，你会发现footer先是离底部有点距离，然后才到底部的，这样看起来很难看，可以加上下面语句隐藏这个过程，使得网页一打开footer就在底部。

1	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来解决

1

#footer{

2	position: fixed;

3

right: 0;

4

left: 0;

5	z-index: 1030;

6	bottom: 0;

7	margin-bottom: 0;

8

}

　　这样footer会一直在浏览器底部。

　　这里再提供一种方法：完全通过css达到的。

1	<footer class="footer">

2	<div class="container">

3	<p class="text">版权所有，翻版不究! http://www.iteblog.com</p>

4

</div>

5

</footer>

下面是css：

01

html {

02	position: relative;

03	min-height: 100%;

04

}

05

body {

06	margin-bottom: 60px;

07

}

08

.footer {

09	position: absolute;

10	bottom: 0;

11	width: 100%;

12	height: 60px;

13	background-color: #f5f5f5;

14

}

15

16	.container {

17	width: auto;

18	max-width: 680px;

19	padding: 0 15px;

20

}

21	.container .text {

22	margin: 20px 0;

23

}

　　这样可以在页面文章内容没有满的时候一直使得footer在底部。