web前端入门到实战：盒子的大小和数据的高度自适应

需求：当数据内容不够，那么盒子的高度就是屏幕的剩余部分
如果数据超出屏幕就出现滚动条

步骤：
1-在请求数据列表的父盒子加上
:style="[{'min-height':wrapperHeight},{height:'inherit'}]"
项目代码:

<div class="item-box" ref="wrap" :style="[{'min-height':wrapperHeight},{height:'inherit'}]">
        <div>
          <p>我是渲染的动态列表...</p>
        </div>
   </div>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

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";
      }
    },