前言
看到了footer，又想起了当时做footer时查的资料，整理下。
正题
1、在文字的最下方：
新建一个页面：
<head runat="server">
<title></title>
<style type="text/css">
body, html
{
margin: 0;
padding: 0;
height: 100%;
}
#content
{
min-height: 100%;
position: relative;
}
#main
{
padding: 10px;
padding-bottom: 60px; /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer
{
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: blue;
width: 100%;
}
#footer h1
{
margin: 0;
padding: 0 10px;
}
</style>
</head>
<body>
<div id="content">
<div id="main">
<script language="javascript" type="text/javascript">
for (i = 0; i < 1000; i++) {
document.write(i + "<br />");
}
</script>
</div>
<div id="footer">
<h1>
Footer</h1>
</div>
</div>
</body>
效果如图：
2、在页面的最下方：
新建一个页面：
<head>
<title></title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
overflow: hidden;
padding-top: 22px;
padding-bottom: 22px;
}
#header
{
background-color: blue;
color: white;
position: absolute;
top: 0px;
left: 0px;
height: 16px;
width: 100%;
}
#content
{
width: 100%;
height: 100%;
overflow:auto;
position:absolute;
}
#footer
{
background-color: green;
color: white;
width: 100%;
height: 16px;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="header">
header</div>
<div id="content">
<script language="javascript" type="text/javascript">
for (i = 0; i < 1000; i++) {
document.write(i + "<br />");
}
</script>
</div>
<div id="footer">
footer</div>
</body>
效果如图：
