html三段式布局,三段式div布局（左固定右自适应）

目的：

界面上模仿简书的主界面布局。即一个大的Navigation包含左边一个primary nav，右边一个middle。一个Main div为内容显示区域，宽度高度均可自适应。如下图：

2016-09-13_183701.png

2016-09-13_183744.png

要点：

固定不可滑动添加：position: fixed;

nav div靠左边添加：left: 0px;top: 0px;

右边的main div设置margin-left为navigation div的宽度：margin-left: 370px;

navigation div需要设置背景颜色，滚动main div时候才不会被覆盖：background-color: #5a5a5a;

代码：

Title

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;

}

我是内容卡片!