SOURCE

<div class="wrapper">
        <div class="header">头部</div>
        <div class="main">
            <div class="m">
                <div class="container">
                    <h4>兼容至ie8的display:table + 双飞翼布局</h4>
                    <dl>
                        <dt>这里使用display:table布局的主要目的：</dt>
                        <dd>1 当主体的内容高度不超过可视区域高度的时候，页脚贴在页面底部;</dd>
                        <dd>2 当主体的内容高度超过可视区域高度的时候，页脚将按正常布局;</dd>
                        <dd>具体效果请手动改变浏览器高度，观察【页脚底部】的位置</dd>
                    </dl>
                    <dl>
                        <dt>双飞翼布局:</dt>
                        <dd>1 左右定宽，中间部分的宽度自适应;</dd>
                        <dd>2 保证中间部分的渲染优先于左右两边;</dd>
                        <dd>【双飞翼布局】和【圣杯布局】是经典布局，值得学习借鉴</dd>
                    </dl>
                    <p>*理解本例的原理，举一反三，可以实现更过的布局</p>
                    <p>参考资料:</p>
                    <a href="http://www.css88.com/archives/6308" target="_blank">display:table布局</a><br/>
                    <a href="http://www.cnblogs.com/imwtr/p/4441741.html" target="_blank">【双飞翼布局】和【圣杯布局】</a>
                </div>
            </div>
            <div class="l">左侧栏</div>
            <div class="r">右侧栏（去掉右侧就是左右布局啦）</div>
        </div>
        <div class="footer">页脚底部</div>
    </div>

html,body{
            height: 100%;
            margin: 0;
            padding: 0 0;
            background: pink;
        }

        /*display: table;布局*/
        .wrapper{ 
            display: table;
            height: 100%;
            width: 100%;
            color: #fff;
        }
        .header{
            display: table-row;
            height: 200px;
            background: #8661cc;
        }
        .footer{
            display: table-row;
            background: green;
        }
        .main{
            display: table-row;
            height: 100%;
            background: #968338;
        }

        /*双飞翼布局*/
        .m{
            float: left;
            /*下面三句组合使用，构建了宽度自适应的容器*/
            box-sizing: border-box;
            width: 100%;
            padding: 0 200px;
        }
        .l,.r{
            float: left;
            width: 200px;
        }
        .l{
            margin-left: -100%;/*向左偏移自己的100%,回到上一行的开头*/
            background: #122a40;
        }
        .r{
            margin-left: -200px;
            background: #122a40;/*向左偏移自己本身的长度,回到了上一行的末尾*/
        }

        /*主体容器，注意：这些样式写在.m上也是可以的*/
        .container{
            background: #31c381;
            overflow: hidden;/*建立一个bfc,用于清除浮动,可用clearfix代替*/
        }