css vh 控制后台内容不出现滚动条的方法

这样使用vh会出现滚动条，不是我要的

代码如下：

<template>
  <div>
    <div class="wrapTitle">一般的后端都有的title，这些高度一般是固定的</div>
    <div class="wrapContent"> 这个一般是下边的内容的，现在用来测试CSS中的vh并使用calc进行计算</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
      };
    },
  }

</script>

<style lang="scss" scoped>
.wrapTitle{
  height: 200px;
  background-color: pink;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
}
.wrapContent{
  height: 100vh;
  background-color: deeppink;
  text-align: center;
  font-size: 50px;
}
</style>

想不出现滚动条的解决方法：

效果如下：

代码如下：

<template>
  <div>
    <div class="wrapTitle">一般的后端都有的title，这些高度一般是固定的</div>
    <div class="wrapContent"> 这个一般是下边的内容的，现在用来测试CSS中的vh并使用calc进行计算</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
      };
    },
  }

</script>

<style lang="scss" scoped>
.wrapTitle{
  height: 200px;
  background-color: pink;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
}
.wrapContent{
  height: calc(100vh - 200px);
  background-color: deeppink;
  text-align: center;
  font-size: 50px;
}
</style>

改动点其实也就是使用calc

即：