web后台管理页面布局

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

3、中部内容显示块；

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

<div class="all" style="background: aquamarine;">
  <div class="header" style="background: crimson">
      头部

  </div>
  <div class="con">
    <div class="asilde" style="background: black">
      左侧导航
    </div>
    <div class="main">
      主内容
    </div>
  </div>
</div>

<style>
  .all{
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
  }
  .header{
    height: 50px;
    line-height: 50px;
  }
  .con .asilde{
    position:absolute;
    top:50px;
    left:0;
    bottom:0;
    width:200px;
    background-color:red;
  }
  .con .main{
    position:absolute;
    top:50px;
    left:200px;
    right:0;
    background-color:green;
    bottom:0;
    /* “bottom:0 与 overflow” 结合使用的效果：当内容超出显示器时，自动添加本区域的滚动条，其他区域保持不变*/
    overflow:auto;
    /*除了上面的方式，还有一种是不定义bottom，也不用overflow，这样内容是多少，中间内容区的行高就是多少，自适应，但是菜单和标题栏就会随着滚轮而动*/
  }
  /*.con{position: relative; width:100%; height:100%;}*/
  /*.asilde,.main{position: absolute;top:0px; bottom:0;height:100%;}*/
  /*.asilde{width:222px;left:0;background:#eee;}*/
  /*.main{left:0;right:0;margin-left:222px; background:#999;width:100%;}*/
</style>

页面显示示例：