<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> *{ margin:0; padding:0;} html,body{ height:100%;} .wrap{ min-height:100%; _height:100%; background:#063;} .con{ padding-bottom:60px; line-height:30px; font-size:13px; color:#fff; text-align:center;} .foot{ height:60px; background:red; position:relative; margin-top:-60px; line-height:60px; font-size:13px; color:#FFF; text-align:center;} </style> </head> <body> <div class="wrap"> <div class="con"> <p>11111111111</p><p>222222222222</p><p>3333333333333</p><p>44444444444444</p><p>5555555555555555</p><p>6666666666666666</p> <p>11111111111</p><p>222222222222</p><p>3333333333333</p><p>44444444444444</p><p>5555555555555555</p><p>6666666666666666</p> <p>11111111111</p><p>222222222222</p><p>3333333333333</p><p>44444444444444</p><p>5555555555555555</p><p>此处文字</p> </div> </div> <div class="foot">上面的文字少了它处于显示器的最下面，而上面的文字多了，它处于滚动条的最下面</div> </body> </html>