如何获取min-height的真实高度在做项目的时候，我们有时候不希望把一个元素的高度写死，而是希望设置一个最小高度，然

在做项目的时候，我们有时候不希望把一个元素的高度写死，而是希望设置一个最小高度，然后利用内容类撑开这个元素。但是min-height的高度是不确定的。

最近在一个vue的项目中就遇到了这种需求，设置了min-height的wrapper容器，想要让inner的的高度等于wrapper的高度。

<div ref="content" class="wrapper">
    <div ref="line" class="inner"></div>
</div>

一开始直接设置

mounted(){
  this.$refs.line.style.height=this.$refs.content.style.height+'px'
}

但是line的高并不会如我预期的等于wrapper的高。再查看了一些博客之后，有人建议使用getBoundingClientRect()，于是我换了如下的方法。

mounted(){
  this.$refs.line.style.height=`${this.$refs.toast.getBoundingClientRect().height}px`
}

但是结果还是解决不了问题。

在查阅了N篇博客以及看了Stack Overflow之后，才知道refs是需要操作到dom节点的，而vue在更新dom时是异步执行的，在时机上面晚于js代码的执行，所以才会导致拿不到line的高度。于是使用了vue的$nextTick，来延缓执行。

mounted(){
  this.$nextTick(()=>{
      this.$refs.line.style.height=`${this.$refs.toast.getBoundingClientRect().height}px`
  })
}

在使用了$nextTick()之后，问题才得以解决。