web-dev-qa-db-ja.com

vuetifyカードの高さを設定する方法

vueとvuetifyを使用してカードを追加しようとしています。vuflexを使用すると、垂直方向に同じように機能する水平カードを作成するためにv-flexを使用してコンテナのスペースを占有します。追加しようとしました。 fill-height、child-flexなどを使用した100％の高さスタイルですが、コンテナを埋めるカードのサイズを取得できません。高さを調整する正しい方法は何ですか？

参照： 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

cssvue.jsvuetify.js
8
Darwin

Vuetifyは、heightprops：カードの高さを手動で定義します

そのため、v-card要素で次のように高さを追加します。

<v-card height="100%">

実際の動作を参照

12
roli roli

あなたの問題を解決できるかどうかはわかりません...しかし、あなたの場合は、ここで問題の解決策を見ることができます： 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>
3
Carlos Henrique Reis

コンテナのすべての子要素に高さ100％を追加してみてください。

0
Jack

私は受け入れられた答えにコメントしました：

<v-card height="100%">

v-card-actions（カードフッター）がある場合、スタイルの問題が発生します。

V-text-cardコンポーネントをイコライズするには、カスタム（SCSS）クラスを作成する必要があります。

.flexcard {
  display: flex;
  flex-direction: column;
}
// Add the css below if your card has a toolbar, and if your toolbar's height increases according to the flex display.
.flexcard .v-toolbar {
  flex: 0;
}

次に、次のようにクラスをv-cardコンポーネントに追加します。

<v-card class="flexcard" height="100%">
  ... Your code here
</v-card>

誰かが同じ問題に直面している場合、これが役立つことを願っています。

Sindrepmと彼のCodePen へのクレジット

0
JustDevelop

高さを修正し、垂直にスクロールを追加します

<v-card class="scroll-y"  style="height: 650px">
0
Atchutha rama reddy Karri