has tried a lot of code, looking for two days, still did not solve, ask God to answer, thank you very much!
affix the code that I wrote below, do not need to locate, use the positioning will head off, will go crazy.

<template>
<div class="hello">
<header>
  header
</header>
<main ref="gundong">
  <div v-for="(item, index) in datas" :key="index">{{item}}</div>
</main>
<footer>
  <input type="text" v-model="msg" name="" id="ipt" class="shuru">
  <input type="button" value="" class="fasong" @click="send">
</footer>
</div>
</template>
<script>
import $ from "jquery"
export default {
data() {
  return {
    msg: "",
    datas: []
  }
},
mounted() {

},
methods: {
  send() {
    this.datas.push(this.msg)
    setTimeout(() => {
      this.$refs.gundong.scrollTop = this.$refs.gundong.scrollHeight
   }, 10);
  }
 },
}
</script>
<style lang="" scoped>
.hello {
position: relative;
width: 100%;
min-height: 100vh;
background-color: -sharpEBEBEB;
}

header,
footer {
position: fixed;
left: 0;
width: 100%;
height: 50px;
background-color: -sharpfff;
}

header {
top: 0;
font-size: 22px;
line-height: 50px;
text-align: center;
}

footer {
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}

footer input {
height: 40px;
}

footer .shuru {
width: 60%;
}

footer .fasong {
width: 20%;
margin-left: 10px;
}

main {
position: absolute;
top: 50px;
left: 0;
bottom: 50px;
width: 100%;
height: calc(100vh - 100px);
overflow-y: scroll;
}

</style>