全屏布局

方法一

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; }

<body> <div class="parent">

<div class="top">top</div>

<div class="left">left</div>

 <div class="right">

<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;}

posted @ 2016-05-13 21:11  浪迹天涯2015  阅读(121)  评论(0)    收藏  举报