Vuetify flexibleAndCard 全高带滚动答案

【问题标题】：Vuetify flexibleAndCard full-height with scrollVuetify flexibleAndCard 全高带滚动
【发布时间】：2018-10-13 00:16:26
【问题描述】：

我正在尝试复制灵活工具栏和卡片工具栏的布局，如 https://vuetifyjs.com/en/components/toolbars#example-flexible-and-card 所示，但我希望卡片内容增长到全屏高度，然后滚动其内容。

我可以让它滚动到这里https://codepen.io/anon/pen/rvwNbr，但我必须设置一个固定的最大高度（以像素为单位）：

<v-card-text style="max-height: 250px; overflow-y: scroll">

我想要的是卡片可以在开始滚动之前长到全高。然后，根据https://vuetifyjs.com/en/layout/grid，我尝试将外部 v-card 包装在具有“fill-height”属性的 v-content 中，但它不起作用

有什么建议吗？

【问题讨论】：

我也很想知道这个问题的答案。我尝试了各种配置，例如将 max-height 设置为100vh，但我无法实现一个组件增长到全屏然后开始溢出并显示滚动条。
你做到了吗？

标签： vuetify.js

【解决方案1】：

这肯定不是最好的解决方案，但它可能会将您推向正确的方向。
使用所有弹性盒的解决方案会更好，但我似乎无法让它与弹性盒一起使用..

<template>
  <v-app id="inspire">
    <v-card flat class="fill-height">
      <v-toolbar color="primary" dark extended flat>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </v-toolbar>

      <v-card class="mx-auto card--flex-toolbar" max-width="700">
        <v-toolbar flat>
          <v-toolbar-title class="grey--text">Title</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
        </v-toolbar>
        <v-divider></v-divider>
        <v-card-text class="card-body">
          <p v-for="p in 30" :key="p">article paragraph {{ p }}....</p>
        </v-card-text>
      </v-card>
    </v-card>
  </v-app>
</template>

<script>
export default {};
</script>

<style>
.card--flex-toolbar {
  margin-top: -62px;
}
.card-body {
  overflow-y: auto;
  max-height: 85vh;
}
</style>

在此处查看codesandbox 中的layout.vue。 v-card-text 将下降到屏幕底部，然后开始滚动内容。随意更改 v-for 循环中的值并观察卡片的增长/收缩。

【讨论】：