優點：品字形布局，頂部和左側導航固定，右側內容隨瀏覽器大小自動調整。
缺點：對低版本瀏覽器兼容性差，以及其他一些小問題。
<!DOCTYPE html>
<html>
<head>
<title>Admin page</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
menu{
height: 100px; /*高度固定，方便后面aside和section的計算*/
width:100%;
margin-bottom: -100px; /*通過設置負邊距，然后下方元素設置正邊距，抵消掉：見.left和.right的margin-top屬性*/
clear:both; /*頂部百分之百寬度*/
background: #f90;
}
aside {
width: 300px; /*左側菜單*/
height: calc(100vh - 100px);
/*calc函數用於執行簡單加減乘除計算，這里的vh表示當前視口高度，即viewport height，所以vh單位特別適合自適應布局*/
overflow: hidden; /*左側不能出現滾動條，多與內容隱藏，一般不會有太多內容*/
background: #5A6A94;
}
section {
height: calc(100vh - 100px);
overflow: auto; /*右側主體內容如果過多，則顯示滾動條*/
background: #BE4F4F;
}
.left{
float: left;
margin-right: -300px;
margin-top: 100px;
}
.right{
margin-left: 300px;
margin-top: 100px;
}
</style>
</head>
<body>
<menu class="top">
menu
</menu>
<aside class="left">
aside
</aside>
<section class="right">
section
</section>
</body>
</html>