如何让Vuetify中两个v-row各占屏幕一半高度且溢出内容可滚动

解决方案 #

核心问题是父容器v-container没有明确高度，导致子元素v-row上的百分比高度无法生效，按以下修改即可实现两个行各占一半高度、超出滚动的需求：

HTML 调整

给v-container添加fill-height、d-flex flex-column类，确保它占满v-main的全部可用高度，作为子元素高度的参考基准：

<div id="app">
  <v-app id="inspire">
    <v-app-bar color="#6A76AB" dark app>
      &nbsp
    </v-app-bar>
    <v-main class='d-flex flex-column' app>
      <v-container fluid class="fill-height d-flex flex-column pa-0">
        <v-row class='yellow' style='height: 50%; flex-shrink: 0;'>
          <v-col v-for='item in items'>{{item}}</v-col>
        </v-row>
        <v-row class='red' style='height: 50%; flex-shrink: 0;'>RED</v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

CSS 调整

简化滚动配置，仅内容超出时显示滚动条：

.yellow {
  overflow-y: auto;
}

调整说明

• fill-height 类让v-container占满v-main的全部剩余高度，子元素的百分比高度才能正常计算
• flex-shrink: 0 避免v-row在内容较少时被自动压缩高度
• pa-0 去掉v-container的默认内边距，避免总高度溢出视口，不需要可删除
• JS代码无需修改，保持原有逻辑即可

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