圣杯布局

圣杯布局： 头部和尾部宽度自适应，中间部分分为三列并且中间部分宽度自适应，两边宽度固定。

   * {
            box-sizing: border-box;
        }
        body {
            text-align: center;
            background-color: #ddd;
            min-width: 636px;
        }
        .container {
            /* 留白 */
            padding-left: 210px;
            padding-right: 210px;
            /* 清除浮动 */
            overflow: hidden; 
        }
        .demo1 header, .demo1 footer {
            padding: 10px;
            margin: 5px;
            background-color: #fff;
        }

        .demo1 .left, .demo1 .right {
            float: left;
            width: 200px;
            position: relative;
            background-color: #fff;
        }
        .demo1 .main {
            float: left;
            width: 100%;
            background-color: #fff;
        }
        .demo1 .left {
           margin-left: -100%;
           left: -205px;
        }
        .demo1 .right {
           margin-left: -200px;
           left: 205px;
        }

  <h1>圣杯布局</h1>
    <section class="demo1">
        <header> Header内容区 </header>
        <div class="container">
            <div class="main">
                中间弹性区著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处著作权归作者所有。
                商业转载请联系作者获得授权，非商业转载请注明出处著作权归作者所有。
                商业转载请联系作者获得授权，
                非商业转载请注明出处</div>
            <div class="left">左边栏</div>
            <div class="right">右边栏</div>
        </div>
        <footer> Footer内容区 </footer>
    </section>