全屏布局 | 易学教程

方法一

html,body,.parent{margin:0;height:100%;overflow:hidden;} body{color:white;} .top{ position:absolute;top:0;left:0;right:0;height:100px; background:blue; }

.left{ position:absolute;left:0;top:100px;bottom:50px;width:200px; background:red; }

.right{ position:absolute;left:200px;

top:100px;bottom:50px;right:0; background:pink;overflow: auto; }

.right .inner{min-height: 1000px;}

.bottom{ position:absolute;left:0;right:0;bottom:0;height:50px; background: black; }

<div class="inner">right</div></div>

<div class="bottom">bottom</div>

</div>

</body>

方法二

html,body,.parent{margin:0;height:100%;overflow:hidden;} body{color: white;}

.parent{display: flex;flex-direction: column;}

.top{height:100px;background: blue;}

.bottom{height:50px;background: black;}

.middle{flex:1;display:flex;}

.left{width:200px;background: red;}

.right{flex: 1;overflow: auto;background:pink;}

.right .inner{min-height: 1000px;}

/*.parent{display: flex;flex-direction: column;}

.top{height:10%;background: blue;}

.bottom{height:5%;background: black;}

.middle{flex:1;display:flex;}

.left{width:20%;background: red;}

.right{flex: 1;overflow: auto;background:pink;}

.right .inner{min-height: 1000px;}*/

方法三

html,body,.parent{margin:0;height:100%;overflow:hidden;} body{color:white;}

.parent{display:flex;flex-direction:column;}

.top{background:blue;}

.bottom{background:black;}

.middle{flex:1;display:flex;}

.left{background: red;}

.right{flex:1;overflow:auto;background: pink;}

.right .inner{min-height:1000px;}

来源：https://www.cnblogs.com/ljty2015/p/5491121.html

标签

background

flex布局

display

overflow