<button class="button" id="button">填充内容</button>

<div class="container">

  <div class="auto-height left">

    左栏<br />

    无高度属性

  </div>

  <div class="auto-height right">

      右栏<br />

    无高度属性

  </div>

  <div class="auto-height center" id="center">

    内容<br>

  </div>

</div>

​

.container {

  overflow: hidden;

  zoom: 1;

}

​

.auto-height {

  margin-bottom: -3000px;

  padding-bottom: 3000px;

}

​

​

.left {

  width: 200px;

  background: #cad5eb;

  float: left;

}

​

.right {

  width: 200px;

  background: #f0f3f9;

  float: right;

}

​

.center {

  /* 向左右元素中偏移，中间内容自适应 */

  margin-left: 210px;

  margin-right: 210px;

  background: #ffe6b8;

}

​

.button {

  display: block;

  margin: 20px auto;

}

const $button = document.getElementById('button');

if ($button) {

  $button.addEventListener('click', () => {

    const $center = document.getElementById('center');

    const $p = document.createElement("p");

​

    $center.append('插入一行信息', $p)

  });

}

​