弹性盒模型实现两栏布局

弹性盒模型实现两栏布局

思路：
首先对html，body设置高度为100%，并且对body设置为相对定位，把头部和底部，用定位的方式固定好，使用弹性盒模型，中间占据剩余的等份，但是由于绝对定位不暂居空间，因此需要设置maging或者padding，距离上下的高度。
然后对main里面进行分割，对main使用弹性盒模型，宽设置好，高度为100%,中间占据剩余空间即可。

HTML

  <header>1</header>
  <main>
    <div class="left">1</div>
    <div class="center">3</div>
    <div class="right">2</div>
  </main>
  <footer>3</footer>

CSS

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    header,
    footer {
      height: 40px;
      background: yellow;

    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }

    main {
      flex: 1;
      padding: 40px 0;
      background: blue;
      height: 100%;
      display: flex;
    }


    main .left {
      width: 200px;
      background: red;
      height: 100%;
    }

    main .center {
      flex: 1;
      background: orange;
      height: 100%;
    }

    main .right {
      width: 200px;
      background: pink;
      height: 100%;
    }

    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>