如題:頂部底部固定高度,中間部分鋪滿螢幕剩餘高度,中間盒子裡又左盒子固定寬度,右盒子自適應寬度且距左盒子總是20px

主要解決方法是中間盒子的top:40px;bottom:40px;設定。原理是在position是absolute時同時設定top和bottom或者同時設定left和right,高度或寬度會被拉伸到指定位置

如圖:


實現程式碼:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></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;
        }
</style>
</head>
<body>
<div class="top">頂部,高度40px</div>
<div class="mainBox">
    <div class="leftBox">左盒子,固定寬度200px,高度自適應鋪滿螢幕剩餘高度</div>
    <div class="rightBox">右盒子,距離左盒子20px,高度自適應寬度自適應鋪滿螢幕剩餘高度</div>
</div>
<div class="bottom">底部,高度40px</div>
</body>
</html>

.