Как установить высоту карты vuetify

Question

Как установить высоту карты vuetify

Я пытаюсь добавить карту с vue и vuetify, которая займет место в моем контейнере, используя v-flex для создания горизонтальной карты, которая действует так же вертикально. Я попытался добавить стиль высоты 100%, используя fill-height, child-flex и т. д., Но я не могу получить размер карты для заполнения контейнера. Как правильно регулировать высоту?

Ref: https://vuetifyjs.com/en/components/cards

<div id="app">

  <v-app id="inspire">

    <v-toolbar color="green" dark fixed app>

      <v-toolbar-title>My Application</v-toolbar-title>

    </v-toolbar>

    <v-content >

      <v-container fluid fill-height >

        <v-layout

          justify-center

          align-center 

        >

          <v-flex text-xs-center >

              <v-card class="elevation-20" >

              <v-toolbar dark color="primary">

                <v-toolbar-title>I want this to take up the whole space with slight padding</v-toolbar-title>

                <v-spacer></v-spacer>

              </v-toolbar>

              <v-card-text>



              </v-card-text>



            </v-card>

          </v-flex>

        </v-layout>

      </v-container>

    </v-content>

    <v-footer color="green" app inset>

      <span class="white--text">&copy; 2018</span>

    </v-footer>

  </v-app>

</div>

Пример: https://codepen.io/anon/pen/LmVJKx

1129 3

css vue.js vuetify.js

3 ответов:

Comments

Ничего не найдено.

roli roli · Accepted Answer · 2018-04-21 09:47:14

С Vuetify вы можете сделать почти все, но внимательно прочитайте документацию.Для вашей проблемы, если вы посмотрите на раздел api, вы заметите высоту опоры, которая будет выполнять работу.

Vuetify говорит Для высоты реквизитов: вручную определите высоту карты

Итак, в элементе v-card добавьте высоту следующим образом:
<v-card height="100%">
Смотрите его в действии

Jack · Accepted Answer · 2018-04-21 04:20:42

Вы можете попробовать добавить высоту 100% к каждому дочернему элементу контейнера.

Carlos Henrique Reis · Accepted Answer · 2018-08-12 05:39:54

Я не знаю, сможешь ли ты решить свою проблему... Но для вашего случая вы можете увидеть решение проблемы здесь: https://codepen.io/carlos-henreis/pen/djaQKb

<div id="app">
  <v-app id="inspire">
    <v-toolbar color="green" dark fixed app>
      <v-toolbar-title>My Application</v-toolbar-title>
    </v-toolbar>
    <v-content >
      <v-container fluid fill-height >
        <v-layout
          justify-center
          align-center 
        >
          <v-flex text-xs-center fill-height>
              <v-card class="elevation-20" height='100%'>
              <v-toolbar dark color="primary">
                <v-toolbar-title>I want this to take up the whole space with slight padding</v-toolbar-title>
                <v-spacer></v-spacer>
              </v-toolbar>
              <v-card-text>

              </v-card-text>

            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer color="green" app inset>
      <span class="white--text">&copy; 2017</span>
    </v-footer>
  </v-app>
</div>