布局解决方案之全屏布局

前端布局非常重要的一环就是页面框架的搭建，而在页面框架的搭建之中，居中布局、多列布局、全局布局是非常重要的一环，今天我们就来总结总结前端干货之布局的解决方案。

part 3:全屏布局

一、何为全屏布局

二、全屏布局的特点

• 浏览器变大时，撑满窗口
• 滚动条不是全局滚动条，而是出现在内容区域里，往往是主内容区域

三、全部平局的方法

方法一 position

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

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

• 优点：兼容性好，ie6下不支持

方法二 flex

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

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

• 缺点：兼容性差，ie9及ie9以下不兼容
  
  方法 flex

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

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

四、总结