转行学开发，代码100天——2018-03-25
今天，本文记录全屏布局的的方法。全屏布局，即滚动条不是全局滚动条，而是出现在内容区域内，；浏览器变大时，撑满窗口。
如：设置下图中布局，其中top区，left区固定宽度，right（inner）区自适应
主要实现方法有：
- 使用position方法
即将上下部分固定，中间部分使用定宽+自适应+两块高度一样高方法。
程序代码：
<div class="parent">
<div class="top">top</div>
<div class="left">left</div> <div class="right">
<div class="inner">inner<br/>inner<br/>inner<br/>inner<br/>inner<br/>inner<br/>inner<br/></div>
</div>
<div class="bottom">bottom</div>
</div>
样式表：
*
{
margin:0;
padding: 0;
}
html,body,.parent
{
margin: 0;
height: 100%;
overflow: hidden; }
body
{
color: white;
}
.top
{
position: absolute;
top:0;
left:0;
right: 0;
height: 100px;
background-color: blue;
}
.left
{
position: absolute;
left: 0;
top: 100px;
bottom: 50px;
width: 200px;
background-color: red;
}
.right
{
position: absolute;
left: 200px;
top: 100px;
bottom: 50px;
right: 0;
background-color: pink;
overflow: auto; //设置right区内容自动适应，滚动条为局部滚动条 }
.right .inner
{
min-height: 1000px;
}
.bottom
{
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 40px;
background-color: black;
}
该方法兼容性较好，但是不支持ie6以下浏览器。
- 使用flex方法
实现方法：通过设置flex属性和flex-direction属性以达到全屏布局。
即在right区增加一个父框middle，并设置属性flex属性及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-color: blue;
}
.bottom
{
height: 50px;
background-color: black;
}
.middle
{
flex: 1;
display: flex;
}
.left
{
width: 200px;
overflow: auto;
background-color: red;
}
.right
{
flex: 1;
overflow: auto;
background-color:pink;
}
.right .inner
{
min-height: 1000px;
}
缺点即是兼容性差（flex属性）。
....
或者，我们依然可以选择表格方法实现这样的布局，根据所用平台，结合各方法的优缺点选择。
至此，已经完成CSS布局的居中、多列和全屏的解决方案。后期会继续优化这些方法的应用，附上一些案列。
本文加之前的两篇关于布局的内容并非我本人原创，只是在网上看到的一篇文章，记录详细（虽有些小错误），总结到位，在此向前辈表示感谢。
由此，也对自己提出更高要求，在学习的过程中，要善于总结、比较，继续精进！