Vue3+Vuetify3：v-card内聊天框底部对齐与v-toolbar置顶问题

问题1：将聊天输入框固定在v-card内部底部 #

当前输入框使用position: fixed脱离了v-card容器，通过调整容器布局结构，利用Flexbox可实现消息区滚动、输入框固定在card底部的效果：

修改MainContainer.vue #

调整v-card内部为垂直Flex布局，让消息区域自动填充剩余空间，输入区固定在底部：

<template>
  <v-container class="h-screen py-md-12 py-sm-5">
    <v-row justify="space-around" class="h-100">
      <!-- 移除overflow-auto，内部用flex控制滚动逻辑 -->
      <v-card max-width="1000" height="100%" width="100%" class="d-flex flex-column">
        <v-toolbar color="tertiary-container" class="position-sticky top-0 z-1">
          <template v-slot:prepend>
            <v-btn icon="$menu" color="on-tertiary-container"></v-btn>
          </template>

          <v-toolbar-title class="text-h6"> ObserverX </v-toolbar-title>

          <template v-slot:append>
            <v-btn
              icon="mdi-theme-light-dark"
              color="on-tertiary-container"
              @click="changeTheme"
            ></v-btn>
          </template>
        </v-toolbar>

        <!-- 消息区域：flex-grow:1 填充剩余空间，overflow-auto实现滚动 -->
        <v-card-text class="flex-grow-1 overflow-auto p-0">
          <slot name="messages" />
        </v-card-text>

        <!-- 输入区域：固定在card底部 -->
        <v-card-text class="p-0 border-t">
          <slot name="input" />
        </v-card-text>
      </v-card>
    </v-row>
  </v-container>
</template>

修改ChatPage.vue #

将消息区和输入区分别对应到MainContainer的指定slot，同时移除原有的绝对/固定定位样式：

<template>
  <v-container class="h-100">
    <v-responsive class="align-center text-center h-100">
      <MainContainer>
        <template #messages>
          <div class="messages p-4">
            <p class="text-body-1" v-for="i in 100" :key="i">Line #{{ i }}</p>
          </div>
        </template>
        <template #input>
          <v-textarea
            variant="solo"
            base-color="surface"
            bg-color="surface-variant"
            color="on-surface-variant"
            rows="3"
            no-resize
            rounded="0"
            v-model="currentMessage"
            class="m-0"
          >
            <template v-slot:append-inner>
              <v-btn
                icon="mdi-send"
                variant="tonal"
                size="small"
                color="primary"
                @click="sendMessage"
              ></v-btn>
            </template>
          </v-textarea>
        </template>
      </MainContainer>
    </v-responsive>
  </v-container>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import MainContainer from "./MainContainer.vue";

const currentMessage = ref("");

const sendMessage = () => {
  console.log(currentMessage.value);
};
</script>

<style scoped>
.messages {
  width: 100%;
  height: 100%;
}
/* 移除原有的container、message-input、message-input-container样式 */
</style>

问题2：让v-toolbar固定在v-card顶部（Vuetify内置方法） #

Vuetify的v-toolbar支持通过内置的position-sticky类结合top-0实现固定效果，添加z-1确保滚动时工具栏不会被内容覆盖：

<v-toolbar color="tertiary-container" class="position-sticky top-0 z-1">
  <!-- 工具栏内容 -->
</v-toolbar>

该方案无需额外自定义CSS，只要父容器（v-card）为可滚动状态，工具栏就会在滚动时固定在card顶部。

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