如何让NuxtJS/Vuetify个组件占据其父容器的一定比例？

Question

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

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

这是该组件的当前状态：

代码...

父容器

<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;
}

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

Answer 1

你应该使用 CSS flexbox.

您可以将 flex-direction 到 column 堆叠 children,

将 justify-content 设置为 flex-end 以将 children 对齐到底部

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

* {
  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>

如何让NuxtJS/Vuetify个组件占据其父容器的一定比例？

How to make NuxtJS/Vuetify components take up a percentage of their parent container?

css

vuetify.js