如何让 NuxtJS/Vuetify 组件占据其父容器的百分比？答案

【问题标题】：How to make NuxtJS/Vuetify components take up a percentage of their parent container?如何让 NuxtJS/Vuetify 组件占据其父容器的百分比？
【发布时间】：2021-12-02 07:22:57
【问题描述】：

我正在尝试使用 Vuetify 创建一个 NuxtJS 组件，该组件具有 1）一个用于显示消息的“窗口”，以及 2）一个用于发送新消息的文本字段。消息窗口使用 vue-chat-scroll 插件，该插件旨在使组件在消息溢出时可滚动。这两个组件都位于父容器面板中。

我希望消息输入字段与父容器面板的底部对齐。父容器的其余部分应由消息窗口填充。我尝试通过硬编码消息窗口和输入字段来使用屏幕的垂直高度来做到这一点。结果无法适应不同的屏幕尺寸。使用 % 根本没有改变它们的高度。

这是该组件的当前状态：

还有代码……

父容器

<template>
<v-container fluid class="content-body chat-panel">
  <v-row style="margin-bottom: 0;">
    <v-col align="center" style="margin-bottom: 0; padding-bottom: 0;">
     <h3>Player Chat</h3>
    </v-col>
    <v-col cols="12">
      <MessagesWindow :topicId="topicId" />
    </v-col>
    <v-col cols="12" v-show="userType != 'o'" style="padding-bottom: 0; padding-top: 0;">
      <MessageBox :topicId="topicId" />
    </v-col>
  </v-row>
</v-container>
</template>

以及他们的风格

.content-body.chat-panel {
    min-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;
}

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

如何实现消息输入字段与父容器底部对齐，并让消息窗口占据父容器的其余部分？

【问题讨论】：

标签： css vuetify.js

【解决方案1】：

你应该使用 CSS flexbox。

您可以将 flex-direction 到 column 堆叠孩子，

将justify-content 设置为flex-end 以将子元素与底部对齐

和flex-grow 到1 在消息窗口，所以它占用了所有额外的可用高度

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content-body.chat-panel {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  min-height: 100vh;
  padding: 2vh 1vw 0 !important;
}

.chatPanel-window {
  flex-grow: 1;
  overflow: auto;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
}

.chatPanel-box {
  padding: 0 auto !important;
  margin: 0 auto !important;
  width: 100%;
}

<div class="content-body chat-panel">
  <div class="chatPanel-window" style="background-color: grey;">Messages</div>
  <div class="chatPanel-box">Input</div>
</div>

【讨论】：