页面布局二(三栏布局)

题目：上下高度固定，中间自适应。（移动端用的比较广泛）

方案一：flexbox布局

　　代码如下

<style>
   html,body{
       margin:0;
       height:100%;
   }
    .layout{
        display:-webkit-flex;
        display:flex;
        -webkit-flex-direction:column;
        flex-direction:column;
        height:100%;
    }
    .header{
        height: 40px;
        background:red;
    }
    .main{
        -webkit-box-flex:1;
        -webkit-flex: 1;
        flex: 1;
        background:yellow;
    }
   .footer{
       height: 40px;
       background:green;
   }
</style>
<!--flexbox布局-->
<section class="layout">
    <div class="header">header</div>
    <div class="main">
        弹性滚动区域
    </div>
    <div class="footer">footer</div>
</section>

方案二：表格布局

　　代码如下：

<style>
   html,body{
       margin:0;
       height:100%;
   }
    .layout{
        display:table;
        width: 100%;
        height:100%;
    }
   .layout>div{
       display:table-row;
   }
    .header{
        height: 40px;
        background:red;
    }
    .main{
        background:yellow;
    }
   .footer{
       height: 40px;
       background:green;
   }
</style>
<!--table布局-->
<section class="layout">
    <div class="header">header</div>
    <div class="main">
        弹性滚动区域
    </div>
    <div class="footer">footer</div>
</section>

通过定位也可做到。

转载于:https://www.cnblogs.com/yangkangkang/p/8665749.html