效果：
代碼：
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 100%;
}
.header {
position: absolute;
background-color: green;
width: 100%;
height: 20%;
}
.content {
position: absolute;
top: 20%;
bottom: 20%;
}
.left {
background: yellow;
width: 20%;
}
.middle {
background: blue;
left: 20%;
right: 180px;
}
.right {
background: red;
width: 180px;
right: 0px;
}
.footer {
position: absolute;
background: brown;
width: 100%;
height: 20%;
bottom: 0px;
}
</style>
</head>
<body id="container">
<div class="header">header</div>
<div class="left content">left</div>
<div class="middle content">middle</div>
<div class="right content">right</div>
<div class="footer">footer</div>
</body>
</html>
思路就是：佈局全部鋪開，不要搞嵌套，然後position絕對。可以把公共樣式抽取，例如：中間一行絕對位置：top和bottom都是一樣的，可以抽取。
之前想通過嵌套，然後位置取絕對或者相對，但是不成功
因爲嵌套，就涉及相對位置了，應該也可以成功，後面再嘗試。