如何在Vuetify2中实现指定布局？C/D宽度50-50，C内容可滚动

以下是完全符合你需求的实现方案，基于Vuetify 2的栅格和布局组件：

核心实现思路 #

• 让页面容器占满整个视口高度，确保C区域能拉伸填充剩余空间
• 垂直布局划分A、B、C+D三个区块，其中A、B高度自适应内容，C+D区块占据剩余高度
• C、D通过12栅格系统的xs6类实现50%宽度平分，不受内容影响
• 给C区域添加垂直滚动，限制仅该区域内容可滚动

完整代码示例 #

<template>
  <v-container fluid height="100vh" class="pa-0">
    <v-layout column fill-height class="ma-0">
      <!-- 区域A：高度自适应内容 -->
      <v-flex class="pa-3 bg-blue lighten-2">
        <h3>区域A</h3>
        <p>这里是自适应高度的内容，内容多少决定区块高度</p>
      </v-flex>

      <!-- 区域B：高度自适应内容 -->
      <v-flex class="pa-3 bg-green lighten-2">
        <h3>区域B</h3>
        <p>更多自适应内容示例，换行或新增内容会自动撑高区块</p>
        <p>第二行演示内容</p>
      </v-flex>

      <!-- C和D所在行：填充A、B之后的剩余高度 -->
      <v-layout row flex-grow-1 class="ma-0">
        <!-- 区域C：宽度50%，高度填充剩余空间，内容可滚动 -->
        <v-flex xs6 height="100%" class="pa-3 bg-orange lighten-2 overflow-y-auto">
          <h3>区域C（可滚动）</h3>
          <!-- 模拟大量滚动内容 -->
          <div v-for="i in 50" :key="i">
            滚动内容行 {{ i }}
          </div>
        </v-flex>

        <!-- 区域D：宽度50%，高度自适应内容 -->
        <v-flex xs6 class="pa-3 bg-purple lighten-2">
          <h3>区域D</h3>
          <p>这里是自适应高度的内容，区块高度由内容决定</p>
          <p>无论内容多少，宽度始终保持50%</p>
        </v-flex>
      </v-layout>
    </v-layout>
  </v-container>
</template>

<style scoped>
.overflow-y-auto {
  overflow-y: auto;
}
</style>

关键细节说明 #

1. 视口高度占满：v-container fluid height="100vh" 确保整个布局容器覆盖浏览器视口，为C区域的高度拉伸提供基础
2. 垂直填充布局：v-layout column fill-height 让子元素在垂直方向上填充容器高度，flex-grow-1 让C+D区块自动占据A、B之后的剩余空间
3. 宽度平分：xs6 类是Vuetify 12栅格系统的一部分，在所有屏幕尺寸下都占据50%宽度，完全满足“无论内容如何都平分”的要求
4. 滚动控制：给C区域添加overflow-y-auto样式，仅当内容超过区块高度时显示滚动条，页面其他区域不会出现滚动
5. 自适应高度：A、B区块未设置固定高度，会自动包裹自身内容，内容变化时高度实时调整

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