如何让NuxtJS/Vuetify组件按占比填充父容器，实现输入框停靠底部、消息窗占满剩余空间？

云原生阿岚

2026-9-30

你可以通过Flex弹性布局实现需求，无需硬编码固定高度，可适配所有屏幕尺寸，方案如下：

问题根因

你之前用百分比高度无效的核心原因是：百分比高度需要所有父级元素都有明确的高度定义，你的布局链中存在没有固定高度的中间容器，所以高度百分比设置不生效。

你当前组件的效果参考：
组件当前效果

第一步：修改模板代码

利用Vuetify内置的Flex工具类调整布局结构：

<template>
<v-container fluid class="content-body chat-panel d-flex flex-column">
  <v-row style="margin-bottom: 0;" class="d-flex flex-column flex-grow-1 h-100">
    <v-col align="center" style="margin-bottom: 0; padding-bottom: 0;">
     <h3>Player Chat</h3>
    </v-col>
    <!-- 消息窗口容器：分配所有剩余高度 -->
    <v-col cols="12" class="flex-grow-1 overflow-hidden">
      <MessagesWindow :topicId="topicId" class="h-100 chatPanel-window" />
    </v-col>
    <!-- 输入框容器：高度由内容撑开，固定在底部 -->
    <v-col cols="12" v-show="userType != 'o'" style="padding-bottom: 0; padding-top: 0;" class="flex-shrink-0">
      <MessageBox :topicId="topicId" class="chatPanel-box" />
    </v-col>
  </v-row>
</v-container>
</template>

第二步：调整样式代码

.content-body.chat-panel {
    /* 把min-height改成height，明确父容器高度 */
    height: 100vh;
    padding-bottom: 0 !important;
    padding-left: 1vw !important;
    padding-right: 1vw !important;
    padding-top: 2vh !important;
}

.chatPanel-window {
    overflow: auto;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    /* 确保组件占满父容器高度 */
    height: 100%;
}

.chatPanel-box {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}