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

我想要的是在开始滚动之前卡片可以长到最大高度。然后，我尝试用v-content包装外部v-card＆＃34; fill-height＆＃34;属性，根据https://vuetifyjs.com/en/layout/grid，但它没有工作

有什么建议吗？

Answer 1

这当然不是最好的解决方案，但它可能会朝着正确的方向前进。
使用所有flexbox的解决方案会更好，但我似乎无法使其与flexbox一起使用。.

<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-for循环中的值，并观察卡的增长/收缩。

Vuetify flexibleAndCard全高滚动

1 个答案: