对于前端开发人员来说，页脚的处理时常让我们比较头痛。因为，如果页面比较长还好说，如果页面比较短，则页脚则会跑到页面的中间部位，十分的不雅观。
那么有什么办法能让页脚乖乖的出现在每页的最下方呢？方法当然是有的，一种是使用js+css的方法,这种办法比较好理解，实现也比较的简单，这也是大家用的比较多的办法。但是，如果用户禁用了js，那么这种方法自然也就不再能够实现。那我们自然的想到了使用纯css。
废话不多说，直接贴代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我个是非常好的小页脚</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<style type="text/css">
html{height:100%;overflow:auto;}
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}
.main{border-bottom:60px solid #fff;}
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}
</style>
</head>
<body>
<div class="all">
<div id="topbar">菜单部分</div>
<div class="main">
我是主体，我是核心<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
虽然我是主体，但是你可以删除我其中的内容再看看我下面的页脚
</div>
<div id="footer">
我是安分守己的页脚，我只安静的待在页面的最下方
</div>
</div>
</body>
</html>
这个效果的好处我想不需要多说，大家看看也就明白了。
FF2.0+、FF3.0+、IE6、IE7、Safari、Opera、Chrome都通过。
IE8b2下的效果有瑕疵，用hack方法解决。
PS:IE8的RC1版本中没有问题了！
分享到：
相关推荐
主要介绍了使用div+CSS将页脚始终控制在页面最下方的方法,文中介绍了设置container以及使用绝对定位两种方法来解决,需要的朋友可以参考下
CSS3实现底部滑盖页脚是一款纯CSS3实现的网站页脚视差滚动特效代码。
紧贴底部的页脚,CSS绝对底部
纯CSS3实现的超酷页脚导航效果在页角处固定显示一个导航条.zip
页脚自然是应该位于页面底部的，但依照一般的做法，如果位于页脚之前的网页内容比较少，或者说使用了一个垂直分辨率较大的显示器，就有可能出现页脚看起来不在页面底部的情况，如下图。 由于页脚基本上是一个网站的...
让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。 方案一： 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <style type=”text/css”&...
Google一下可以找到很多让页脚紧贴页面底部的方法，我试过其中的很多，但他们总会在某些方面存在一些问题。之所以有这些问题，可能是因为出现了更新版本的浏览器。一些方法因为太过久远，原本在老版本浏览器可以正常...
主要介绍了在移动Web页面中使用CSS固定页脚,作者推荐使用box-sizing的百分比调整方法,需要的朋友可以参考下
CSS+Cookie实现的固定页脚广告条
1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单...
1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单...
页脚显示在页面底端的布局方法 html{ margin:0px; padding:0px; height:100%;} body{ margin:0px; padding:0px;height:100%;} .body{ position:relative; min-height:100%; _height:100%; position:relative} .main...
第一步：规划网站，本...第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决IE浏览器的显示BUG；
1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 4. 菜单...