前端布局之三：全屏布局
这是前端布局的第三篇，讲讲全屏布局，全屏布局也是一种常见的布局：
上面是导航、下面是底部，中间是左右布局，中间的布局自带滚动条，想要知道有几种实现方法吗？有两种，下面我们就来看看吧：
定高PX全屏布局
效果图是这样的：
1、Position
Html代码是这样的：
|
1 2 3 4 5 6 |
<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> |
CSS代码是这样的：
|
1 2 3 4 5 6 7 |
html,body,.parent{height:100%;overflow:hidden;} .parent{position:relative;} .top{position:absolute;top:0;left:0;right:0;height:100px;} .left{position:absolute;left:0;top:100px;bottom:50px;width:200px;} .right{position:absolute;left:200px;right:0;top:100px;bottom:50px;overflow:auto;} .bottom{position:fixed;left:0;right:0;bottom:0;height:50px;} .right .inner{min-height:1000px;} |
这个布局IE6是不支持的，可以用Hack方案：戳这里
2、Flex
Html的代码是这样的：
|
1 2 3 4 5 6 7 8 |
<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> |
CSS代码是这样的：
|
1 2 3 4 5 6 7 8 |
html,body,.parent{height:100%;overflow:hidden;} .parent{display:flex;flex-direction:column;} .top{height:100px;} .bottom{height:50px;} .middle{flex:1;display:flex;} .left{width:200px;} .right{flex:1;overflow:auto;} .right .inner{min-height:1000px;} |
Flex布局IE11以及以上才支持。
定高百分比全屏布局
效果图是这样的：
html代码不变，来看只要把原先PX的部分都换成百分比即可。
1、Position
|
1 2 3 4 5 6 7 |
html,body,.parent{height:100%;overflow:hidden;} .parent{position:relative;} .top{position:absolute;top:0;left:0;right:0;height:10%;} .left{position:absolute;left:0;top:10%;bottom:5%;width:20%;} .right{position:absolute;left:20%;right:0;top:10%;bottom:5%;overflow:auto;} .bottom{position:fixed;left:0;right:0;bottom:0;height:5%;} .right .inner{min-height:1000px;} |
2、Flex
|
1 2 3 4 5 6 7 8 |
html,body,.parent{height:100%;overflow:hidden;} .parent{display:flex;flex-direction:column;} .top{height:10%;} .bottom{height:5%;} .middle{flex:1;display:flex;} .left{width:20%;} .right{flex:1;overflow:auto;} .right .inner{min-height:1000px;} |
自适应全屏布局
效果图是这样的：
这个方案就不能用position来实现了，但可以用Flex来实现，Html代码是一样的，来看一下。
|
1 2 3 4 5 |
html,body,.parent{height:100%;overflow:hidden;} .parent{display:flex;flex-direction:column;} .middle{flex:1;display:flex;} .right{flex:1;overflow:auto;} .right .inner{min-height:1000px;} |
自适应全屏布局还可以用Grid方案来做，但Grid兼容性不好，只是个W3C的草案，就不介绍了，这三个布局方法的对比效果如下图：
