题目描述：当内容不满一屏时，底部内容始终位于显示屏的底部；当内容超过一屏时，则位于内容底部。
示例代码：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>footer始终居于底部</title> <style type="text/css"> * { margin:0; padding:0; } body { font:12px/1.5 arial; } html, body, .wrap { height:100%; } .wrap { height:auto; min-height:100%; _height:100%; background:#CCC; color:#fff; font-size:16px; text-align:center; } .main { padding-bottom:80px; } .footer { position:relative; height:80px; margin-top:-80px; background:#333; color:#fff; font-size:16px; text-align:center; } </style> </head> <body> <div class="wrap"> <div class="main"> <h1>内容部分</h1> <h1>内容部分</h1> <h1>内容部分</h1> <h1>内容部分</h1> <h1>内容部分</h1> <h1>内容部分</h1> <br /> <h2>测试测试</h2> <h2>测试测试</h2> <h2>测试测试</h2> <h2>测试测试</h2> <h2>测试测试</h2> <h2>测试测试</h2> <br /> </div> </div> <div class="footer"> <h1>底部</h1> </div> </body> </html>
必须注意的是，需要把footer单独拿出来。