<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<style>
body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height: 100%;
}
#content {
min-height: 100%;
position: relative;
}
#main {
padding: 10px;
padding-bottom: 60px;
}
header {
background-color: #AAA;
}
footer {
position: absolute;
bottom: 0;
background-color: #AAA;
width: 100%;
padding: 10px 0;
}
footer h1 {
font: 20px/2 Arial;
margin: 0;
padding: 0 10px;
}
</style>
<body>
<div id="content">
<header> 头部 </header>
<div id="main">
<h1>hi</h1>
<p>观察footer效果。</p>
<p>asdfsdfsdfsdf</p>
<!-- <script type="text/javascript">
for(var i = 1; i<=155;i++){
document.write(i + "<br />");
}
</script>-->
</div>
<footer>
<h1>Footer</h1>
</footer>
</div>
</body>
</html>