Vuetify v-card 适合 v-col 中所有可能的高度

Question

我正在使用 vue 和 vuetify 构建一个 login/signup 页面。我把代码放在下面（文字是意大利语，因为我是意大利人，但你可以明白这一点）：

<v-row 
      align="center"
      justify="center"
      class="prova"
    >
        <v-col
        cols="10"
        lg="3"
        md="4"
        sm="5"
        >
          <v-card
          >
            <v-card-title class="center">
              Login
            </v-card-title>

            <v-card-text
              class="center"
            >
              <v-container>
                <v-form>
                  <v-text-field
                    label="Email"
                    required
                  ></v-text-field>

                  <v-text-field
                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                    :type="showPassword ? 'text' : 'password'"
                    label="Password"
                    counter
                    @click:append="showPassword = !showPassword"
                  ></v-text-field>

                  <v-btn
                    color="primary"
                  >
                    Accedi
                  </v-btn>
                </v-form>
              </v-container>
            </v-card-text>
          </v-card>
        </v-col>
        <v-col
        cols="10"
        lg="3"
        md="4"
        sm="5"
        fill-height
        >
          <v-card
          >
            <v-card-title class="center">
              Registrazione
            </v-card-title>

            <v-card-text class="center">
            <v-container >
              <div
              >Vuoi accedere al sito 
                ma non sei registrato? 
                Clicca qui sotto 
                per farlo subito!</div>
              <br>
              <v-btn
                color="primary"
              >
                Registrati
              </v-btn>
            </v-container>
            </v-card-text>
          </v-card>
        </v-col>
    </v-row>

如果您尝试这样做，您会发现“Registrati”（注册）卡的高度低于登录卡。有没有办法（最好用css，如果用js没办法）使高度与登录卡相同，这样它们看起来更好？

谢谢！祝你有美好的一天！

Answer 1

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-70836234-11sck?file=/src/components/CardHeight.vue

从您的 v-row 中删除 align="center"。然后只需将 css height:100% 添加到您的 v-card

更新： 要仅在移动视图中将固定高度设置为 v-card，可以使用 vuetify's display breakpoints，在这种情况下，我将它们应用于 style 属性，但您可以将其与任何 [=31] 一起使用=]属性和任何有js的地方。

<!-- Card 1 -->
<v-card :style="$vuetify.breakpoint.xsOnly ? 'height: 280px' : ''">
...
</v-card>

<!-- Card 2 -->
<v-card :style="$vuetify.breakpoint.xsOnly ? 'height: 280px' : 'height:100%'">
...
</v-card>

Vuetify v-card 适合 v-col 中所有可能的高度

Vuetify v-card fit all height possible in v-col

javascript

css

vue.js

vuejs2

vuetify.js