如何实现仅中间卡片可滚动（仿Twitter桌面版布局）

要实现你要的效果，核心是利用CSS的sticky定位固定左右侧边栏，同时给中间区域设置垂直滚动。结合Vuetify的布局系统，修改方案如下：

步骤1：核心布局调整逻辑 #

• 外层容器设置min-height: 100vh，确保布局占满视口高度
• 给v-row添加align-items="flex-start"，取消默认的等高列拉伸，让固定栏高度由内容决定
• 左右侧边栏用Vuetify断点类lg:position-sticky，仅在大屏幕下启用固定定位，适配移动端流式布局
• 中间区域设置max-height: 100vh和overflow-y: auto，内容超出时触发垂直滚动

完整修改后的代码 #

<template>
  <div style="min-height: 100vh;">
    <v-row align-items="flex-start">
      <!-- 左侧固定侧边栏 -->
      <v-col lg="3" cols="12" class="lg:position-sticky lg:top-0 lg:h-auto" style="z-index: 10;">
        <v-card class="mx-auto rounded-lg" elevation-10 tile>
          <v-img
            height="200"
            src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"
          ></v-img>

          <v-col>
            <v-avatar size="100" style="position: absolute; top: 140px">
              <v-img
                src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"
              ></v-img>
            </v-avatar>

            <v-item-group
              style="float: right; display: flex; padding-right: 20px"
            >
              <v-item>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon color="blue" dark v-bind="attrs" v-on="on">
                      mdi-grease-pencil
                    </v-icon>
                  </template>
                  <span>Edit User details</span>
                </v-tooltip>
              </v-item>

              <v-spacer />

              <v-item>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon color="red" dark v-bind="attrs" v-on="on">
                      mdi-cog mdi-spin
                    </v-icon>
                  </template>
                  <span>Edit password</span>
                </v-tooltip>
              </v-item>
            </v-item-group>
          </v-col>

          <v-row>
            <v-col lg="4" cols="12">
              <v-list-item color="rgba(0, 0, 0, .4)"> </v-list-item>
            </v-col>
          </v-row>
        </v-card>
      </v-col>

      <!-- 中间可滚动区域 -->
      <v-col lg="6" cols="12" style="max-height: 100vh; overflow-y: auto;">
        <v-card>
          <v-list-item-title> Profile </v-list-item-title>
          <!-- 可添加更多内容测试滚动效果 -->
          <div v-for="i in 50" :key="i" style="padding: 16px; border-top: 1px solid #eee;">
            动态内容 {{i}}
          </div>
        </v-card>
      </v-col>

      <!-- 右侧固定侧边栏 -->
      <v-col lg="3" cols="12" class="lg:position-sticky lg:top-0 lg:h-auto" style="z-index: 10;">
        <v-card>
          <v-list-item-title> Stats</v-list-item-title>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

关键细节说明 #

• lg:top-0：让侧边栏固定在视口顶部，若有顶部导航栏，可调整为导航栏高度（如top:64px）
• z-index:10：避免侧边栏被中间滚动内容覆盖
• 断点类lg:前缀：保证小屏幕下自动切换为正常流式布局，不影响移动端体验

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