页面布局二(三栏布局)

题目:上下高度固定,中间自适应。(移动端用的比较广泛)

方案一: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>

通过定位也可做到。

posted @ 2018-03-28 19:16  yangkangkang  阅读(233)  评论(0编辑  收藏  举报