让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。
方案一：
<!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%;
background: #eee;
} #content {
padding: 10px;
padding-bottom: 100px;
} #footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: lightblue;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<script type="text/javascript">
for (var i = 0; i < 400; i++) {
document.write(i + '<br/>');
}
</script>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
方案二：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css实现页脚始终在最底部</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} html {
*overflow: auto;
} body {
_width: expression(this.parentNode.clientWidth);
} html, body {
height: 100%;
} .section {
min-height: 100%;
_height: 100%;
} .footer {
height: 60px;
background: #000;
margin-top: -60px;
color: #FFF;
}
</style>
</head>
<body>
<div class="section">
<script type="text/javascript">
for (var i = 0; i < 400; i++) {
document.write(i + '<br/>');
}
</script>
</div>
<div class="footer">我是页脚</div>
</body>
</html>
让页脚始终固定在屏幕底部：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
<meta name="generator" content="editplus">
<meta name="author" content="Ariex">
<meta name="keywords" content="">
<meta name="description" content="">
<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 {
background-color: yellow;
width: 100%;
height: 100%;
overflow: auto;
} #footer {
background-color: green;
color: white;
width: 100%;
height: 16px;
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
<script language="javascript">
</script>
</head>
<body>
<div id="header">header</div>
<div id="content">
<script language="javascript">
for (i = 0; i < 1000; i++) {
document.write(i + "");
}
</script>
</div>
<div id="footer">footer</div>
</body>
</html>