头部div随着底部div自适应高度变化而变化

最新推荐文章于 2026-01-05 11:04:12 发布

原创最新推荐文章于 2026-01-05 11:04:12 发布 · 253 阅读

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端 #vue.js #javascript #html



<template>
  <div class="container">
    <div class="top" :style="{ height: topHeight + 'px' }">
      上半部分内容
    </div>
    <div class="bottom" ref="bottom">
      底部内容
      底部内容底部内容
      底部内容
      底部内容
      底部内容
      底部内容
      底部内容
      <textarea ref="myTextarea" v-model="content" @input="adjustTextareaHeight"></textarea>
      底部内容
      底部内容
      底部内容
      底部内容
      底部内容
      底部内容
      底部内容
      底部内容
      底部内容
      底部内容
      底部内容底部内容
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topHeight: 0,
      content: ''
    };
  },
  methods: {
    adjustTextareaHeight() {
      this.$refs.myTextarea.style.height = 'auto'; // 先重置高度为自动，以便重新计算高度
      this.$refs.myTextarea.style.height = this.$refs.myTextarea.scrollHeight + 'px'; // 设置Textarea的高度为内容的实际高度
    }
  },
  computed: {
    containerHeight() {
      return this.$refs.bottom.offsetHeight;
    }
  },
  watch: {
    containerHeight(newValue) {
      this.topHeight = newValue;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.top {
  flex-grow: 1; /* 上半部分div根据底部div的高度自适应 */
  background: rebeccapurple;
  color: red;
}

.bottom {
  /* 底部div样式 */
  background: teal;
  padding: 20px;
}



.container {
  position: relative;
}

textarea {
  resize: none; 
  overflow-y: hidden; 
}
</style>