<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .top { width: 100%; height: 40px; background: #000; color:#fff; position:absolute; top:0; /*以上设置是重点必须的*/ text-align:center; line-height:40px; } .bottom{ width:100%; height:40px; background:#000; color:#fff; position:absolute; bottom:0; /*以上设置是重点必须的*/ text-align:center; line-height:40px; } .mainBox{ width:100%; position:absolute; top:40px; bottom:40px; /*以上设置是重点必须的*/ } .mainBox .leftBox{ height:100%; width:200px; float:left; margin-bottom:40px; overflow: auto; /*以上设置是重点必须的*/ border:6px solid green; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align:center; line-height:40px; } .mainBox .rightBox{ height:100%; margin-left:220px; /*以上设置是重点必须的*/ border:6px solid crimson; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: auto; text-align:center; line-height:40px; } .left1{ background-color: #0088cc; width: 100%; height: 60%; } .left2{ background-color: #CCCCCC; width: 100%; height: 40%; } </style> </head> <body> <div class="top">顶部，高度40px</div> <div class="mainBox"> <div class="leftBox"><!--左盒子，固定宽度200px，高度自适应铺满屏幕剩余高度--> <div class="left1"></div> <div class="left2"></div> </div> <div class="rightBox">右盒子，距离左盒子20px，高度自适应宽度自适应铺满屏幕剩余高度</div> </div> <div class="bottom">底部，高度40px</div> </body> </html>