对于前端开发人员来说，页脚的处理时常让我们比较头痛。因为，如果页面比较长还好说，如果页面比较短，则页脚则会跑到页面的中间部位，十分的不雅观。
那么有什么办法能让页脚乖乖的出现在每页的最下方呢？方法当然是有的，一种是使用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版本中没有问题了！
分享到：
相关推荐
在网页设计中，保持页脚始终位于页面底部是一项常见的需求，尤其在内容较少或动态变化时，确保页脚不会随着内容的变化...在实际应用中，可以根据具体的设计需求和用户体验选择合适的方法来实现始终在页面最下方的页脚。
通过设置页面结构和CSS样式，我们可以确保页脚始终在页面的最下方，主要内容区域和侧边栏随着内容的增加而向下滚动，而页脚则固定在视口的底部。 1. **主要内容容器**：主要内容容器的CSS样式需要设置`min-height`...
在网页设计中，一个常见的需求是让页脚始终固定在页面底部，无论页面内容多少，都能保持在视口的最下方。这就是所谓的“紧贴底部的页脚”或“CSS绝对底部”布局。这种布局方式可以提供良好的用户体验，特别是在内容...
这个压缩包“纯CSS3实现的超酷页脚导航效果在页角处固定显示一个导航条.zip”提供了如何使用纯CSS3技术创建一个既美观又实用的页脚导航条的示例。下面我们将详细探讨CSS3中的关键特性，以及如何利用这些特性来实现...
7. **JavaScript增强**：虽然这个项目标签包含了"JS特效"，但纯CSS3实现的滑盖页脚并不一定需要JavaScript。不过，如果想要增加交互性，如监听滚动事件并动态改变页脚状态，那么JavaScript或jQuery将派上用场。 ...
在创建404页面时，我们需要包含必要的元素，如标题（`<title>`标签）、页眉（`<header>`）、主要内容区域（`<main>`）、以及可能的页脚（`<footer>`）。内容部分通常包括一个引人注目的404错误代码，一条简短的错误...
本文将详细解析一种利用CSS实现页脚始终显示在页面底部的方法。 #### CSS布局原理 要使页脚始终保持在页面底部，无论页面内容多少，都需确保页脚的位置不会因内容的增多而改变。本例中，通过以下CSS样式实现了这一...
【CSS固定页脚】在移动Web页面设计中，固定页脚是一种常见的布局需求，它确保不论用户滚动页面至何处，页脚始终可见，保持在屏幕底部。这在单页应用（SPA）中尤其重要，因为SPA通常需要提供一致的导航体验，而页脚...
通过为`div`元素定义CSS样式，我们可以控制其在页面上的布局、尺寸、颜色、字体等视觉特性。例如，可以设置`width`, `height`, `margin`, `padding`等属性来调整`div`的大小和位置。 CSS（层叠样式表）则是用于描述...
在固定页脚广告条的设计中，CSS主要负责以下几点： 1. **定位**：使用`position: fixed`属性，可以将元素固定在视口的某个位置。对于页脚广告条，我们通常将其设置为`bottom: 0`，使其始终贴在浏览器窗口的底部。 ...
页脚自然是应该位于页面底部的，但依照一般的做法，如果位于页脚之前的网页内容比较少，或者说使用了一个垂直分辨率较大的显示器，就有可能出现页脚看起来不在页面底部的情况，如下图。 由于页脚基本上是一个网站的...
这个页面是采用纯div+css布局构建的，展示了专业且富有创意的服装设计作品。"div+css布局"是一种常见的网页设计技术，它通过HTML的div元素进行结构划分，结合CSS（层叠样式表）进行样式控制，实现网页的美观与功能。...
让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。 方案一： 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <style type=”text/css”&...
"让页脚紧贴页面底部"的问题涉及到CSS布局和浏览器兼容性，尤其是在新的浏览器版本和不同设备尺寸下。传统的解决方案往往在某些情况下无法达到预期效果，这通常是因为旧的CSS技巧无法适应现代浏览器的更新。 一种...
【标题】"闲云酒店_html+css纯静态页面_闲云旅游html_" 指的是一个基于HTML和CSS技术构建的静态网站项目，主要用于展示一个名为“闲云酒店”的旅游住宿服务。在这个项目中，开发者使用了这两种基础的前端技术来创建...