全屏布局

333.png

1 position
html

<div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">
        right<p class="inner">inner</p>
    </div>
    <div class="bottom">bottom</div>
</div>

CSS

html,body,.parent{  height:100%;  overflow: hidden;/*去掉了滚动条*/ }
.top,.left,.right,.bottom{  position: absolute;  }
.top{  left:0;  top:0;  right:0;  height:10%;  background-color: deepskyblue;  }
.left{  left:0;  top:10%;  bottom:5%;  width: 20%;  background-color: greenyellow;  }
.right{ top:10%;  left:20%;  right:0;  bottom:5%;  background-color:red;  overflow: auto;/*内部出现滚动条*/  }
.bottom{  left:0;  bottom:0;  right:0;  height:5%;  background-color: gray;  }
.right .inner{  height: 10000px;width:100%  background-color:red;  }

2 flex
html

<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            right<p class="inner">inner</p>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>

CSS

html, body, .parent {  height: 100%;  overflow: hidden; /*去掉了滚动条*/  }
.parent{  display: flex;  flex-direction: column;  }
.top {  height: 10%;  background-color: deepskyblue;  }
.middle{  flex:1;  display: flex;  }
.left {  width: 20%;  background-color: greenyellow;  }
.right {  flex:1;  background-color: red;  overflow: auto; /*内部出现滚动条*/  }
.bottom {  height: 5%;  background-color: gray;  }
.right .inner {  height: 10000px;  background-color: yellow;  width: 100%;;  }

444.png