如何根据后台数据多少动态的设置元素的高度

Question

需求：更具后台数据的多少来判断盒子的高度

1- 当数据不够的时候让盒子的高度为浏览器的剩余部分

2- 当数据比较多超出屏幕久让他自适应出现滚动条

做法：我是监听了数据列表gamlist，列表发生改变的时候久判断：
当前数据列表的高度和 页面的剩余盒子做对比

`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';
    }
},`
。
这样监听有个问题 我发现每次监听到的数据都不一样，比如浏览器的高度

![image.png](/img/bVbzq2l)

Answer 1

盒子 {
 max-height: 500px;
 overflow: auto;
}

盒子设置max-height，设置overflow:auto，超出部分会出现滚动条。
现在的问题就是让max-height为你题目要求的1.当数据不够的时候让盒子的高度为浏览器的剩余部分。

所以，你现在只要计算浏览器的剩余部分的高度即可，将max-height设置为这个值。

所以你根本不用去关心盒子里的数据有多少，不需要去监听盒子里的数据的变化。