vuetify.js - Vuetify flexibleAndCard 全高带滚动

Question

我正在尝试复制灵活工具栏和卡片工具栏的布局，如 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 中。但它没有用

有什么建议？

Answer 1

这肯定不是最好的解决方案，但它可能会插入您朝着正确的方向前进。

使用所有 flexboxes 的解决方案会更好，但我似乎无法让它与 flexboxes 一起工作..

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

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