« 读者故事(1)——在interium.cn网站中使用的CSS技术 | 你问我答(28)——关于网页设计软件对CSS支持的比较 »

你问我答(27)——使用CSS定位页面的“footer”

colorandy读者提出这样一个关于页面布局的问题：

“如果有一个footer层，我想让他固定出现在整个页面的最下方，不随着页面中的内容而变化，CSS中要怎样设？比如里面是一些版权信息。因为我整页的内容比较少，footer老跟着内容跑到上面去，很不美观。”

这个问题如果在以前使用表格布局，并不困难，只要给页面的最外层表格高度设置为100%就可以了，然而，在Web标准的规范中，表格的高度已经属于废止的属性，应该避免使用，而且使用Web标准以后，也不在提倡使用表格布局了，那么是否有办法使用CSS来实现页面的页脚部分固定在浏览器底端呢？

下面就来讲解它的实现方法。

基本思路

首先考虑外层设置一个容器div，id设为#container，使他的高度为浏览器窗口的高度，然后将#footer这个div设置为#container的子div，并使用绝对定位的方式，使他固定到#container的底端，以实现希望的效果。

点击这里察看案例页面效果。 改变浏览器的高度和宽度，可以看到Footer部分的效果。

代码实现

下面先考虑HTML结构，这个演示页面的HTML代码非常简单。

1
2
3
4
5
6
7
8
9
10
11
12

<body>
	<div id="container">
		<div id="content">
			<h1>Content</h1>
			<p>请改变浏览器窗口的高度，以观察footer效果。</p>
			<p>这里是示例文字，………，这里是示例文字。</p>
		</div>
		<div id="footer">
			<h1>Footer</h1>
		</div>
	</div>
</body>

然后设置CSS，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

	body,html {
		margin: 0;
		padding: 0;
		font: 12px/1.5 arial;
		height:100%;
	}
	#container {
		min-height:100%;
		position: relative;
	}
	#content {
		padding: 10px;
		padding-bottom: 60px;  
		/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
	}
	#footer {
		position: absolute;
		bottom: 0;
		padding: 10px 0;
		background-color: #AAA;
		width: 100%;
	}
	#footer h1 {
		font: 20px/2 Arial;
		margin:0;
		padding:0 10px;
	}

要点分析

1：首先要给html和body元素设置高度（height属性）为100% （第5行），这样先保证根元素的高度撑满整个浏览器窗口，然后下面才能使#container的高度撑满整个浏览器窗口。

至于为什么用同时设置html和body元素，是因为Firefox和IE认为的根元素不一样，因此这里都给他们设置上。

2：然后把#container的高度也设置为100% （第8行），但是要注意，这里使用了“min-height”属性，而不是普通的height属性，这是因为我们要考虑到，如果#content中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#container的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。

而使用min-height属性的作用就是使#container的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。

但是需要说明的是，在Firefox和IE7中，支持min-height属性，而IE6种，并不支持min-height属性，但是“歪打正着”的是，IE 6中，会把min-height属性解释为height属性，但是IE 6中height属性的效果却是min-height本来应该具有的效果，也就是说，在IE 6中，子div的高度会撑大父div的高度。所以这样正好可以实现在IE6、IE7和Firefox中都可以正确实现我们希望的效果了。

3：接下来，将#container设置为相对定位（第9行），目的是使他成为它里面的#footer的定位基准，也就是所谓的“最近的定位过的祖先元素”。

4：然后把#foooter设置为绝对定位（第17行），并使之贴在#container的最下端（第18行）。

5：但是要注意，如果当我们把#foooter贴在#container的最下端以后，他实际上已经和上面的#content这个div重叠了，为了避免覆盖#content中的内容，我们在#contetn中设置了下侧的padding，使padding-bottom的值等于#footer的高度（第13行），就可以保证避免覆盖#content的文字了，这个高度的计算注意代码中的注释中给出的计算方法（第14行）。

6：剩下的就没有更多技术需要解释了。如果读者对上面的解释还不十分理解，说明您对CSS的基本概念还了解得不够，先仔细把CSS的核心原理和基本概念彻底搞清楚，再来看这些代码就是很轻松的了。

点击这里察看案例页面效果。

案例总结

这个看起来并不复杂的代码，去包含了很多CSS的核心概念和原理，因此这里又回到了我们曾经多次给读者的建议上：一定要扎扎实实把CSS的核心原理搞清楚，特别是CSS的4大核心基石：盒子模型、标准流、浮动、定位。只有把这些核心基础掌握到烂熟于胸的程度，才能游刃有余地进行设计。

6,800

这篇文章发表于 2008年03月28日 星期五 11:24 am，并被分类于你问我答。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。



欢迎您发表留言

(须填写)
(须填写,不公开)
请注意：这里输入的HTML代码会被屏蔽，如果需要讨论复杂的具体代码问题，请到我们的论坛发贴，谢谢！

21条留言