Vuetify中如何保证v-main高度不低于视口高度的70%且无抖动？

你遇到的抖动本质是手动JS修改DOM高度和Vuetify内置的布局自动计算逻辑冲突导致的，防抖节流只能降低触发频率，解决不了根本的逻辑冲突问题，最优解是优先用纯CSS方案实现需求，不需要额外JS逻辑。

方案1：纯CSS实现（最推荐，零抖动） #

Vuetify的<v-app>默认采用flex纵向布局，高度为100vh，子元素<v-app-bar>、<v-main>、<v-footer>按照flex规则分配高度，直接给<v-main>设置最小高度即可满足需求，完全和Vuetify原生布局逻辑兼容：

1. 给<v-main>添加自定义类名避免样式污染

<template>
  <v-main class="main-min-height">
    <div id="main--bg">
      <!-- 原有内容 -->
    </div>
  </v-main>
</template>

2. 添加对应样式

/* 兼容常规设备 */
.main-min-height {
  min-height: 70vh;
}

/* 适配移动端动态视口，避免浏览器地址栏显示隐藏导致的高度异常 */
@supports (height: 1dvh) {
  .main-min-height {
    min-height: 70dvh;
  }
}

该方案效果：

• 当footer高度小于30vh时，<v-main>会自动拉伸填充剩余视口空间，高度大于70vh
• 当footer高度大于等于30vh时，<v-main>保持至少70vh的高度，整个页面总高度超过100vh时自动出现滚动条，完全符合你的要求。

方案2：优化后的JS实现（仅用于最小高度比例需要动态调整的场景） #

如果确实需要通过JS动态控制最小高度，优化逻辑避免和框架布局计算冲突：

• 用Vue的ref获取DOM元素，替代querySelector
• 通过nextTick等待框架布局计算完成后再执行自定义逻辑
• 直接修改<v-main>的min-height属性，不要修改内部元素的完整style属性，减少重排范围
  代码示例：

<template>
  <v-main ref="mainRef" v-resize="fn_guarantee_container_min_height">
    <div id="main--bg">
      <!-- 原有内容 -->
    </div>
  </v-main>
</template>

<script>
export default {
  methods: {
    fn_guarantee_container_min_height() {
      this.$nextTick(() => {
        const mainEl = this.$refs.mainRef.$el ?? this.$refs.mainRef
        const minHeight = window.innerHeight * 0.7
        mainEl.style.minHeight = `${minHeight}px`
      })
    }
  },
  mounted() {
    this.fn_guarantee_container_min_height()
  }
}
</script>

内容的提问来源于stack exchange，提问作者Lee