三段式div布局（左固定右自适应）
2016-09-14 本文已影响720人
im宇
目的：
界面上模仿简书的主界面布局。即一个大的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;
代码：
<!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">我是内容卡片!</div>
</div>
</body>
</html>
