这里还有一种实现技术:http://code.google.com/p/cleanstickyfooter/

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

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

下面就来讲解它的实现方法。</p>

基本思路

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

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

代码实现

下面先考虑HTML结构,这个演示页面的HTML代码非常简单。</p>

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

然后设置CS

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的高度撑满整个浏览器窗口。</p>

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

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

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

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

3:接下来,将#container设置为相对定位(第9行),目的是使他成为它里面的#footer的定位基准,也就是所谓的“最近的定位过的祖先元素”。</p>

4:然后把#foooter设置为绝对定位(第17行),并使之贴在#container的最下端(第18行)。</p>

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

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

点击这里察看案例页面效果。</a>

案例总结

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

原理:为了让浏览器识别高度为100%,设置html、body的height:
100%,同时把所有元素的margin和padding设置为0,这样就等于整个浏览器窗口的总高度了,把footer置于最下方,这是footer就
超出这&#8220;100%”的范围了,为让footer
能够刚好在最下方,给footer加一个等于自身高度的上方的负边距(负的margin)强制把它向上推一个自身的高度,即 margin-top:
负的数值;
。但当内容超过一屏会发现内容会覆盖在footer的上方。所以还要给内容部分设置下方内补丁等于footer的高度,强制把内容部分向上推一个
footer的高度就OK了。(
参考文章</a>)</p>

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注