CSS+Vueitfy 填充剩余高度并在需要时添加滚动条

Question

我正在使用 Vue 和 Vuetify 创建一个移动网站，当用户观看直播视频时，该网站看起来类似于 Youtube 原生应用。我希望聊天组件在纵向模式下填充视频下方的可用高度。目前在包含聊天的 div 上使用d-flex flex-column，但 div 仍然在屏幕外运行（整个应用程序滚动）。我想避免在调整大小时手动计算高度，我该怎么办？

编辑：CodePen

<v-app>
  <v-app-bar app fixed>
    <!-- brevity -->
  </v-app-bar>
  <v-content style="padding: 56px;">
    <player/>
    <details-bar/>
    <chats class="d-flex flex-column"/> <!-- a div that should be contained between show bar and bottom of screen -->
  </v-content>
</v-app>

Answer 1

您是否尝试过在v-content 上设置flex 并在chats 组件上设置flex-grow？例如：

<v-content style="padding: 56px;" class="d-flex flex-column">
    <player/>
    <details-bar/>
    <chats style="flex-grow: 1;"/> <!-- a div that should be contained between show bar and bottom of screen -->
  </v-content>

理论上，这应该给player 和details-bar 一个恒定的高度，并将其余空间给chats。如果您可以将v-content 的高度限制为窗口的高度，那么您应该很好。希望 Vuetify 会自动执行此操作，但如果没有，您可以尝试手动设置 max-height 可能吗？