等高布局

等高布局： N列的高度是相同的。实现原理是通过margin-bottom和padding-bottom设置一个很大并且和相加相互取消的值。

  * {
      box-sizing :border-box;
    }
    body {
      background-color: #ddd;
      text-align: center;
    }
    .container {
      overflow: hidden;
    }
    .main, .left {
      background-color: #fff;
      margin-bottom: -100000px;
      padding-bottom: 100000px;   
    }
    .main {
      margin-left: 210px;
      float: left;
      width: calc(100% - 210px);
    }
    .left {
      float: left;
      width: 200px;
      margin-left: -100%;
    }

  <h1>等高</h1>
  <div class="container">
    <div class="main">
        <p>this is main</p>
        <p>this is main</p>
        <p>this is main</p>
        <p>this is main</p>
        <p>this is main</p>
      </div>
      <div class="left">left</div>  
  </div>