Vuetify flexibleAndCard全高滚动

2018-05-03 vuetify.js

我正在尝试复制弹性工具栏和卡片工具栏的布局,如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中,但是没有用

有什么建议?

Answers

当然,这不是最好的解决方案,但是它可能会向正确的方向推动。
使用所有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>

在此处的layout.vue中查看layout.vue 。电子贺卡文本将下降到屏幕底部,然后开始滚动内容。随时更改v-for循环中的值,并观察卡的增长/收缩。

Related