CSS 之 圣杯布局&双飞翼布局

这里有两种方法：https://www.cnblogs.com/niujifei/p/11269093.html

如果不要求先加载中间部分，那还可以用flex布局来实现，较为简单：

html布局：

<div class="container">
    <header>header</header>
    <section>
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </section>
    <footer>footer</footer>
  </div>

 css样式如下：flex:1表示可弹性伸缩；flex:0 0 100px表示宽为固定100px;

    .container{display: flex;flex-direction: column;height:100vh;}
    header,footer{background:gray;flex:0 0 100px;}
    section{flex:1;background:lightgoldenrodyellow;display: flex}
    .left,.right{background:green;flex:0 0 100px;}
    .center{flex:1}

此种方法可以使中间section部分为弹性高度，section下的center的div宽度为弹性的；