<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>盒子模型</title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; width:100%; overflow:hidden; } .wrap { height:100%; width:100%; overflow:hidden; padding:110px 0 70px; box-sizing:border-box; } .head { height:100px; background:#933; width:100%; margin:-110px 0 10px; } .body { height:100%; overflow:hidden; line-height:30px; } .bar { width:280px; height:100%; background:#9CF; float:left; overflow:auto; padding:0 10px; } .con { margin-left:310px; background:#6F6; height:100%; overflow:auto; padding:0 10px; } .foot { height:60px; background:#099; width:100%; margin-top:10px; } </style> </head> <body> <div class="wrap"> <div class="head"></div> <div class="body"> <div class="bar"> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> </div> <div class="con"> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> <p>asdasdas</p> </div> </div> <div class="foot"></div> </div> </body> </html>