圣杯布局（你听说过么？）

<div class="header"><p>头部</p></div>
    <div class="main">
        <div class="left">
            <p>左侧</p>
        </div>
        <div class="middle">
            <p>中间</p>
        </div>
        <div class="right">
            <p>右侧</p>
        </div>
    </div>
    <div class="footer"><p>底部</p></div>

*{
        margin: 0;
        padding: 0;
        text-align: center;
        color: #fff;
        font-size: 33px;
    }
    .header{
        width: 100%;
        background-color: orange;
    }
    .main{
        overflow: hidden;
        background-color: #123;
        padding-left: 200px;
        padding-right: 200px;
    }
    .main .left{
        float: left;
        width: 200px;
        background-color: red;
        margin-left: -200px;
    }
    .main .middle{
        background-color: #777;
        float: left;
        width: 100%;
    }
    .main .right{
        float: right;
        margin-right: -200px;
        width: 200px;
        background-color: #455;
    }
    .footer{
        background-color: pink;
    }