Блог

Главная - Вопросы по программированию - Vuetify.js — как сделать так, чтобы карточки в одном ряду заполняли все доступное вертикальное пространство?

Vuetify.js — как сделать так, чтобы карточки в одном ряду заполняли все доступное вертикальное пространство?

#vue.js #vuejs2 #vue-component #vuetify.js

#vue.js #vuejs2 #vue-компонент #vuetify.js

Вопрос:

У меня есть три карты в одном ряду, но одна больше других, я хотел бы растянуть меньшую, чтобы заполнить все доступное вертикальное пространство, я пробовал с align="stretch" помощью on v-row , но это не работает. Вот моя ручка

 <v-container>
  <v-row dense align="stretch">
    <v-col cols="4">
      <v-card>
        <v-card-text class="green--text">
          <h5 class="text-truncate text-uppercase">Sales</h5>
          <h1>{{ sales }}</h1>
        </v-card-text>
      </v-card>
    </v-col>
    <v-col cols="4">
      <v-card>
        <v-card-text class="primary--text">
          <h5 class="text-truncate text-uppercase">Balance</h5>
          <h1>{{ balance }}</h1>
        </v-card-text>
      </v-card>
    </v-col>
    <v-col cols="4">
      <v-card>
        <v-card-text>
          <v-form>
            <v-select :items="items" label="Add Amount" outlined>
              <template slot="item" slot-scope="data">
                {{ data.item.value | numberFmt }}
              </template>
            </v-select>
            <v-btn color="primary">OK</v-btn>
          </v-form>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</v-container>

Ответ №1:

Просто добавьте min-height: 100%; стиль для карточек. 🙂

Я отредактировал ваш пример здесь: https://codepen.io/bj-rn-nyborg/pen/oNzNyRy

Ответ №2:

В v-row or нет реквизита v-col , который контролирует высоту дочерних компонентов, поэтому вы должны контролировать высоту каждой карты, используя min-height реквизит со "100%" значением as :

 <v-card min-height="100%">
...
Метки: ,