day09—css布局解决方案之全屏布局

转行学开发，代码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布局的居中、多列和全屏的解决方案。后期会继续优化这些方法的应用，附上一些案列。

本文加之前的两篇关于布局的内容并非我本人原创，只是在网上看到的一篇文章，记录详细（虽有些小错误），总结到位，在此向前辈表示感谢。

由此，也对自己提出更高要求，在学习的过程中，要善于总结、比较，继续精进！