<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>后台界面布局</title> <style> * { margin: 0; padding: 0; } .wrap { min-width: 100%; position: absolute; min-height: 100%; overflow: hidden; } .head-div { position: absolute; box-sizing: border-box; width:100%; height: 70px; line-height: 70px; background-color: #1299ff; min-width: 824px !important; z-index:3; } .left-div { position: absolute; box-sizing: border-box; width: 150px; height: 100%; padding-top: 70px; background: #4d5e70 bottom; z-index:2; } .body-div { position: absolute; box-sizing: border-box; width: 100%; height: 100%; background-color: #00ff21; padding-left: 150px; padding-top: 70px; min-width: 824px !important; z-index:1; } </style> </head> <body> <div class="wrap"> <div class="head-div">head</div> <div class="left-div">left</div> <div class="body-div">boby</div> </div> </body> </html>
效果如下：
