目的：
界面上模仿簡(jiǎn)書的主界面布局。即一個(gè)大的Navigation包含左邊一個(gè)primary nav，右邊一個(gè)middle。一個(gè)Main div為內(nèi)容顯示區(qū)域西乖，寬度高度均可自適應(yīng)。如下圖：
2016-09-13_183701.png
2016-09-13_183744.png
要點(diǎn)：
- 固定不可滑動(dòng)添加：position: fixed;
- nav div靠左邊添加：left: 0px;top: 0px;
- 右邊的main div設(shè)置margin-left為navigation div的寬度：margin-left: 370px;
- navigation div需要設(shè)置背景顏色坛增，滾動(dòng)main div時(shí)候才不會(huì)被覆蓋：background-color: #5a5a5a;
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: auto;
}
/*三段式界面布局*/
.com-nav{
width: 370px;
height: 100%;
float:left;
position: fixed;
left: 0px;
top: 0px;
}
.com-primary-nav{
width: 50px;
height: 100%;
float: left;
background-color: #2A2A2A;
}
.com-middle-mav{
width: 320px;
height: 100%;
float: right;
background-color: #5a5a5a;
}
.com-main{
width: auto;
min-width: 530px;
height: 100%;
margin-left: 370px;
}
.box{
background-color: #00b0ff;
width: 700px;
height: 2000px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="com-nav">
<div class="com-primary-nav"></div>
<div class="com-middle-mav"></div>
</div>
<div class="com-main">
<div class="box">我是內(nèi)容卡片!</div>
</div>
</body>
</html>
