sticky footer 始终位于页面底部的footer -

chuckle_yue

浏览: 1114 次

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-08 ( 1)
更多存档...

sticky footer 始终位于页面底部的footer

博客分类：

css succedaneum for js

footer css

做ui 已经有段时间，今天终于觉得把一些心得写出来，希望能帮助和我一样在前段努力的人，也希望得到大家的指导。

今天就来说一说这个footer吧。

每个网页都有footer，但是有时候页面内容太少，footer在页面中央显示是在不太好看。怎么样才能使footer始终位于页面的底部呢。在网上查了很多资料，现在总结一下吧。

看代码之前还是先说明一下缺点吧。

footer的高度必须固定。
在ie8的docucment mode是standards模式的时候，如果只能纵向改变浏览器的大小（横向不能同时变化）,footer不能跟着往下走。

<!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,body{
				height:100%;
			}
			body{
				width:980px;
				margin:0 auto;
			}
			.lastChild{
				margin-bottom:0;
			}
			.firstChid{
				margin-top:0;
			}
			h1{
				text-align:center;
			}
			.wrapper{
				height:auto !important;
				min-height:100%;
				height:100%;
				margin:0 auto -85px;
			}
			.wrapper .content{
				padding-bottom:85px;
			}
			.copyRight{
				background:#457FCC;
				height:100%;
			}
			.footer{
				height:85px;
				margin:-85px 0 0;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">
				<h1 class="firstChid">Sticky footer</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p class="lastChild">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
		<div class="footer">
			<p class="copyRight lastChild firstChid">this is the copy right part</p>
		</div>
	</body>
</html>