全屏布局-网易云课堂微专业-页面架构-布局解决方案

Methods ①：position

兼容性：IE6不支持
解决方案：http://nec.netease.com/library/141027

<div class="parent">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right">
        <div class="inner">right</div> <!--嵌套滚动条-->
    </div>
    <div class="bottom"></div>
</div>

<style>
   html, body, .parent {
       height: 100%;
       overflow: hidden
   }

   .top {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       /*height: 100px;*/
       height: 10%;
       background: red;
   }

   .left {
       position: absolute;
       left: 0;
       /*top: 100px;*/
       top: 10%;
       /*bottom: 50px;*/
       bottom: 5%;
       /*width: 200px;*/
       width: 20%;
       background: green;
   }

   .right {
       position: absolute;
       overflow: auto;
       /*left: 200px;*/
       left: 20%;
       right: 0;
       /*top: 100px;*/
       top: 10%;
       /*bottom: 50px;*/
       bottom: 5%;
       background: blue;
   }

   .bottom {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       /*height: 50px;*/
       height: 5%;
       background: orange;
   }

   .right.inner {
       min-height: 1000px;
   }
</style>

Methods ②：flex

兼容性：IE9及以下不支持

<div class="parent">
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="right">
            <div class="inner">right</div> <!--嵌套滚动条-->
        </div>
    </div>
    <div class="bottom"></div>
</div>

<style>
   html,body,.parent{
       height: 100%;
       overflow: hidden;
   }
   .parent{
       display: flex;
       flex-direction: column;
   }
   .top{
       /*height: 100px;*/
       height: 10%;
       background: red;
   }
   .bottom{
       /*height: 50px;*/
       height: 5%;
       background: green;
   }
   .middle{
       flex: 1;display: flex;
   }
   .left{
       /*width: 200px;*/
       width: 20%;
       background: blue;
   }
   .right{
       flex: 1;
       overflow: auto;
       background: orange;
   }

   .right.inner {
       min-height: 1000px;
   }
</style>

Methods ③：top、left、bottom内容自适应

方案：
flex
grid：W3C草案

<div class="parent">
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="right">
            <div class="inner">right</div> <!--嵌套滚动条-->
        </div>
    </div>
    <div class="bottom"></div>
</div>

<style>
   html,body,.parent{
       height: 100%;
       overflow: hidden;
   }
   .parent{
       display: flex;
       flex-direction: column;
   }
   .top{
       /*height: 100px;*/ //去除
       height: 10%; //去除
       background: red;
   }
   .bottom{
       /*height: 50px;*/ //去除
       height: 5%; //去除
       background: green;
   }
   .middle{
       flex: 1;display: flex;
   }
   .left{
       /*width: 200px;*/ //去除
       width: 20%;//去除
       background: blue;
   }
   .right{
       flex: 1;
       overflow: auto;
       background: orange;
   }

   .right.inner {
       min-height: 1000px;
   }
</style>