常见移动端的上下高度固定，中间自适应的三栏式布局

常见pc端的三栏等高布局，两边宽度固定，中间自适应。有多种写法，各有优缺点，开发时可根据实际情况进行选择；五种方法实现代码见：http://www.cnblogs.com/leiting/p/8195966.html

在移动端常见的三栏式布局一般是上下高度固定，中间自适应，写法也不止一种

1. 绝对定位布局

<section class="layout absolute">
    <style>
        .layout.absolute .con>div{position: absolute;}
         .layout.absolute .top{background: red;top: 0;height:100px;}
        .layout.absolute .center{background: yellow;top:100px;bottom:100px;}
        .layout.absolute .bottom{background: blue;bottom:0;height:100px;}
    </style>
    <article class="con">
        <div class="top"></div>
        <div class="center">
            <h1>绝对定位</h1>
            这是中间部分的内容
        </div>
        <div class="bottom"></div>
    </article>
</section>

2. box-sizing布局

<section class="layout boxSizing">
    <style>
    .layout.boxSizing{margin-left: 60%;}
    .layout.boxSizing .con{height: 100%;}
    .layout.boxSizing .top{background: red;height: 100px;position: absolute;z-index: 20;top:0;}
    .layout.boxSizing .center{background: yellow;z-index: 10;height: 100%;position: absolute;top:0;box-sizing: border-box;border-top:100px solid red;border-bottom:100px solid blue;}
    .layout.boxSizing .bottom{background: blue;height: 100px;position: absolute;z-index: 20;bottom:0;}
    </style>
    <article class="con">
        <div class="top"></div>
        <div class="center">
            <h1>box-sizing布局</h1>
            这是中间部分的内容
        </div>
        <div class="bottom"></div>
    </article>
</section>

box-sizing是CSS3属性： 
box-sizing: content-box | border-box | inherit

content-box，默认属性，遵从标准盒模型。 （标准盒模型中盒子的宽高包括外边距、边框、内边距、内容）
border-box，是使用IE盒模型。 （IE盒模型中盒子的宽高包含内边距和边框）
inherit，继承父类的box-sizing属性值。

浏览器的兼容情况： 
Chrome/Opera/IE 支持 box-sizing 
FireFox 支持 -moz-box-sizing 
Safari 支持 -webkit-box-sizing