全屏布局

333.png

1 position
html

    
top
    
left
    

        right
inner
    
    
bottom

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

    
top
    

        
left
        

            right
inner
        
    
    
bottom

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