简洁的后台div布局

1、上层标签块； 
2、左侧菜单块； 

3、中部内容显示块；

需求：要求上层标签块、左侧菜单快固定不动，滚动条只对中部显示块作用；

 1 <div class="all" style="background: aquamarine;">
 2   <div class="header" style="background: crimson">
 3       头部
 4 
 5   </div>
 6   <div class="con">
 7     <div class="asilde" style="background: black">
 8       左侧导航
 9     </div>
10     <div class="main">
11       主内容
12     </div>
13   </div>
14 </div>
15 <style>
16   .all{
17     position: absolute;
18     top: 0px;
19     bottom: 0px;
20     width: 100%;
21     height: 100%;
22   }
23   .header{
24     height: 50px;
25     line-height: 50px;
26   }
27   .con .asilde{
28     position:absolute;
29     top:50px;
30     left:0;
31     bottom:0;
32     width:200px;
33     background-color:red;
34   }
35   .con .main{
36     position:absolute;
37     top:50px;
38     left:200px;
39     right:0;
40     background-color:green;
41     bottom:0;
42     /* “bottom:0 与 overflow” 结合使用的效果：当内容超出显示器时，自动添加本区域的滚动条，其他区域保持不变*/
43     overflow:auto;
44     /*除了上面的方式，还有一种是不定义bottom，也不用overflow，这样内容是多少，中间内容区的行高就是多少，自适应，但是菜单和标题栏就会随着滚轮而动*/
45   }
46   /*.con{position: relative; width:100%; height:100%;}*/
47   /*.asilde,.main{position: absolute;top:0px; bottom:0;height:100%;}*/
48   /*.asilde{width:222px;left:0;background:#eee;}*/
49   /*.main{left:0;right:0;margin-left:222px; background:#999;width:100%;}*/
50 </style>

效果图：