CSS布局方案——全屏布局

顶栏和底栏定高 + 导航列定宽 + 内容区自适应

• 方案一：position
  • HTML代码：

  <div class="parent">
      <div class="top">顶栏定高</div>
      <div class="left">左侧导航列定宽</div>
      <div class="right">内容区自适应</div>
      <div class="bottom">底栏定高</div>
  </div>
  

  • CSS代码：

  html, body, .parent{ height:100%; overflow:hidden; } /* 外层撑满屏幕 */
  .top{ position:absolute; top:0; right:0; left:0; height:100px; }
  .left{ position:absolute; top:100px; bottom:50px; left:0; }
  .right{
      position:absolute; top:100px; right:0; bottom:50px; left:200px; /* 使内容区足够大 */
      overflow:auto; /* 产生滚动条 */
  }
  .bottom{ position:absolute; right:0; bottom:50px; left:0; }
  

  • 优点：兼容性强，性能高
  • 缺点：IE6不支持（hack：http://nec.netease.com/library/141027）
• 方案二：flex
  • HTML代码（先分上中下，再分左右）：

  <div class="parent">
      <div class="top">顶栏定高</div>
      <div class="middle">
          <div class="left">左侧导航列</div>
          <div class="right">内容区自适应</div>
      </div>
      <div class="bottom">底栏定高</div>
  </div>
  

  • CSS代码：

  html,body,.parent{ height:100%; overflow:hidden; }
  .parent{ display:flex; flex-direction:column; } /* 纵向排列 */
  .top{ height:100px; }
  .bottom{ height:50px; }
  .middle{ flex:1; display:flex; }
  .left{ width:200px; }
  .right{ flex:1; overflow:auto; }
  

  • 优缺点：即flex的优缺点
• 拓展：若宽高均为百分比，则将上述代码中的像素值改成百分比即可

全部自适应

• 方案一：flex
  • HTML代码：

  <div class="parent">
      <div class="top">顶栏定高</div>
      <div class="middle">
          <div class="left">左侧导航列</div>
          <div class="right">内容区自适应</div>
      </div>
      <div class="bottom">底栏定高</div>
  </div>
  

  • CSS代码：

  html,body,.parent{ height:100%; overflow:hidden; }
  .parent{ display:flex; flex-direction:column; }
  .middle{ flex:1; display:flex; }
  .right{ flex:1; overflow:auto; }
  

  • 备注：同上方布局的flex方案的代码一样，就是去掉所有的宽高定值
• 方案二：grid
  • grid目前仍是W3C草案，不作详解