织梦CMS - 轻松建站从此开始!

文档之家-IT技术文档共享平台

纯CSS 教你如何让页脚保持在页面底部

时间:2010-12-03 06:09来源:docfans.net 作者:admin 点击:
纯CSS 教你如何让页脚保持在页面底部

当一个含少量的内容HTML页面,有时页脚下方会留下一个空白。 这可能看起来很糟糕,特别是在大屏幕上。 网站设计者通常要求页脚显示在整个屏幕的底部,但是很多时候都不知道该怎样去做。
当我第一次使用纯CSS布局的时候,我试图让页脚保持在底部,但我却无法做到这一点。 现在,经过几年的实践,我终于找到了一个简单的方法来做到这一点。 我的方法100%有效,并且CSS完全兼容所有浏览器, 你可以在以后您自己的设计中去实践一下。

主要特点

浏览器兼容
兼容的浏览器:Firefox(Mac和PC机),Safari浏览器(苹果机和PC),Internet Explorer 8,7,6和5.5,Opera和Netscape 8

固定在页面底部
一个页面如果内容非常多,可能原来的页脚需要右边的滚动条拖动才能看到,但是这个则不需要,他会保持在屏幕的下方,它不会占用您的阅读空间。

没有使用到CSS hack
例子中没有使用 css hack 。我们要更多的考虑到CSS向后的兼容性,使其在任何浏览器下都保持规则一致。

iPhone, iPod Touch, 以及 iPad等移动设备的兼容性
safari是最早支持CSS3的浏览器。因为它使用的是强大的Webkit渲染引擎。这就意味着这些动画效果都能很好的在使用safari浏览器的设备 上工作。

没有使用JavaScript
这例子都是用CSS和HTML实现的,没有添加任何的JS代码。

只有一个限制

您必须设置这个页脚div的固定高度.(不能为auto)。选择适当的高度值,单位可以选择px,em。不过这个限制应该不会有什么大的影响,切忌如果要它正常工作必须这样做。

如果你的页脚文字很多那么它也是一个不错的选择,如果您想在页脚添加图片,不用担心只需要放心添加就行啦。

那么他是如何实现的呢?

很简单只要一些HTML和CSS代码就可以了

HTML代码:

[html]
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
[/html]

只需要4个DIV层,一个是container容器,一个头部header,一个内容body,和一个页脚footer。剩下的就交给CSS来实现吧。

[css]
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
[/css]

还有一个简单为IE5.5和IE6制定的CSS规则

[css]
#container {
height:100%;
}
[/css]

关于标记
html和body 必须设置高度为height:100%,这个是为了内容页面填满整个屏幕

container div设置
这个div我们要设置他的最小高度为min-height:100%,这是为了使他即使是没有任何内容的情况下也能全部显示出来。有一些老的浏览器不支持最小高度,您可以用JS或其他方法来实现(后面我们会讲到)。最后该DIV还要设置为position:relative;

header div设置

没有什么特别的 ,您可以自己选择其大小和颜色

body div设置
这个部分也没有什么特别之处,唯一重要的是它必须有一个底部填充即等于(或略大于)页脚的高度。

footer div设置
footer 需要设置他的高度height,高度单位 pixels (或者 ems),使用绝对定位并且设置bottom:0;

关于IE老版本浏览器的css
旧版本的Internet Explorer不明白最小高度,幸运的是在正常的高度在这些老的微软浏览器中用完全相同的方式显示,也就是说,它会延伸到100%的窗口的高度。

到此为止,本文结束,希望这个例子会对您以后的工作和学习起到一定的帮助作用。

(责任编辑:eric)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容