盒子的大小和數據的高度自適應

需求：當數據內容不夠，那麼盒子的高度就是屏幕的剩餘部分
如果數據超出屏幕就出現滾動條

步驟：
1-在請求數據列表的父盒子加上
:style="[{'min-height':wrapperHeight},{height:'inherit'}]"
項目代碼:

<div class="item-box" ref="wrap" :style="[{'min-height':wrapperHeight},{height:'inherit'}]">
        <div>
          <p>我是渲染的動態列表...</p>
        </div>
   </div>
專門建立的學習Q-q-u-n： 731771211，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

2-在mounted 加上監聽數據列表頂部的距離

    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrap.getBoundingClientRect().top + 'px';

3-在方法methods中加上方法

 getHeight () {
      let wrapperHeight =
        document.documentElement.clientHeight -
        this.$refs.wrap.getBoundingClientRect().top;
      let windowHeight = document.documentElement.offsetHeight;
      let warpHeight = this.$refs.wrap.offsetHeight;

      if (wrapperHeight >= warpHeight) {
        this.$refs.wrap.style.height = wrapperHeight + "px";
      } else {
        this.$refs.wrap.style.height = "inherit";
      }
    },