footer居于页面底部。当页面不够长时，居窗口底部

footer居于页面底部。当页面不够长时，居窗口底部
作者：Neoxone 发表时间： 2008年08月26号，星期二阅读：17,026 次

当网页内容不够长时，footer将居于窗口的底部。而不是紧跟上部分网页内容。
当页面足够长，footer将被挤下，而不是仍然固定在窗口底部。
（始终固定在窗口底部的fixed效果看这篇文章：footer始终固定于窗口底部(支持ie6的fixed效果)）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body,html {
 margin: 0;
 padding: 0;
 height:100%;
}
#main {
 position: relative;
 min-height:100%;
 _height:100%; /* for ie6 因为ie6不支持min-height */
 background:#eee;
}
#content {
 padding: 10px;
 padding-bottom: 30px;  /* 不至被footer盖住 */
}
#footer {
 position: absolute;
 bottom: 0;
 height: 30px;
 width: 100%;
 background:#ccc;
}
</style>
</head>
<body>
          <div id="main">
               <div id="content">
                      <h1>content</h1>
                      <p>content内容.可以手动增加这里的内容测试<br /></p>
                  </div>
              <div id="footer">
                     Footer
              </div>
          </div>
     </body>
</html>

注意，这里在ie6下会有一个bug：动态增加内容（或动态改变高度），会使影响到的绝对定位元素无法重新定位。如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body,html {
	margin: 0;
	padding: 0;
	height:100%;
}
#main {
	position: relative;
	min-height:100%;
	_height:100%; /* for ie6 因为ie6不支持min-height */
	background:#eee;
}
#content {
	padding: 10px;
	padding-bottom: 30px;  /* 不至被footer盖住 */
}
#footer {
	position: absolute;
	bottom: 0;
	height: 30px;
	width: 100%;
	background:#ccc;
}
</style>
</head>
<body>
<div id="main">
	<div id="content">
		<h1>content</h1>
		<p>content内容<br /></p>
		<input type="button" value="动态增加高度" onclick="document.getElementById('content').style.height='900px';" />
	</div>
	<div id="footer">
		 Footer
	</div>
</div>
</body>
</html>

滑动滚动条看看，这个问题只出现在ie6中。

所幸，我们找到了解决的办法。
改变绝对定位元素footer的位置，让它放在动态改变的内容的上方：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body,html {
	margin: 0;
	padding: 0;
	height:100%;
}
#main {
	position: relative;
	min-height:100%;
	_height:100%; /* for ie6 因为ie6不支持min-height */
	background:#eee;
}
#content {
	padding: 10px;
	padding-bottom: 30px;  /* 不至被footer盖住 */
}
#footer {
	position: absolute;
	bottom: 0;
	height: 30px;
	width: 100%;
	background:#ccc;
}
</style>
</head>
<body>
<div id="main">
	<div id="footer">
		 Footer
	</div>
	<div id="content">
		<h1>content</h1>
		<p>content内容<br /></p>
		<input type="button" value="动态增加高度" onclick="document.getElementById('content').style.height='900px';" />
	</div>
</div>
</body>
</html>

问题虽然解决了，但或许很多人都会不满意。因为这样的页面结构实在很不合理。
那我们换用js来解决：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body,html {
	margin: 0;
	padding: 0;
	height:100%;
}
#main {
	position: relative;
	min-height:100%;
	_height:100%; /* for ie6 因为ie6不支持min-height */
	background:#eee;
}
#content {
	padding: 10px;
	padding-bottom: 30px;  /* 不至被footer盖住 */
}
#footer {
	position: absolute;
	bottom: 0;
	height: 30px;
	width: 100%;
	background:#ccc;
}
</style>
</head>
<body>
<div id="main">
	<div id="content">
		<h1>content</h1>
		<p>content内容.可以增加这里的内容测试<br /></p>
		<input type="button" value="动态增加高度" onclick="document.getElementById('content').style.height='900px';document.getElementById('footer').style.bottom=0;" />
	</div>
	<div id="footer">
		 Footer
	</div>
</div>
</body>
</html>

标签：布局

这篇文章发布于 2008年08月26号，星期二，20:43，归类于 CSS2, DOM。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

acoolboy 说：

2009年04月6日于09:22

main里面如果有div布局的具有高度设置的区块，就不能实现底部最下。始终固定在一个地方。

oneboys 回复:
四月 8th, 2009 at 13:46

那应该是这种情况http://www.cssass.com/blog/index.php/2008/19.html

阿超说：

2010年10月22日于01:05

感谢，试着很好用。

高度自适应显示器分辨率 - 开发者问答说：

2013年04月25日于14:13

[...] 是这样吧？http://www.cssass.com/blog/index.php/2008/15.html 本条目发布于 2010 年 3 月 13 日。属于 web前端分类，被贴了 web前端标签。作者是 admin。 [...]

CSSASSCSSASS

footer居于页面底部。当页面不够长时，居窗口底部
作者：Neoxone 发表时间： 2008年08月26号，星期二阅读：17,026 次

相关文章:

4 条评论发表在“footer居于页面底部。当页面不够长时，居窗口底部”上

留下回复

footer居于页面底部。当页面不够长时，居窗口底部作者：Neoxone 发表时间： 2008年08月26号，星期二 阅读：17,026 次

相关文章:

4 条评论 发表在“footer居于页面底部。当页面不够长时，居窗口底部”上

留下回复

footer居于页面底部。当页面不够长时，居窗口底部
作者：Neoxone 发表时间： 2008年08月26号，星期二阅读：17,026 次

4 条评论发表在“footer居于页面底部。当页面不够长时，居窗口底部”上