后台布局之反例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: #1d9ad6; color: white; } .pg-content{} .pg-footer{} .pg-content .menu{ width:20%; background-color: red; min-width: 200px; height: 700px; } .pg-content .content{ width:80%; background-color: green; min-width: 200px; } .left{ float:left; } .right{ float: right; } </style> </head> <body style="margin: 0"> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">asd</div> <div class="content left"> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> <p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p> </div> </div> <div class="pg-footer"></div> </body> </html>