Vuetify V-Card passt auf alle möglichen Höhen in V-Col

Question

Ich erstelle eine Anmelde-/Registrierungsseite mit vue und vuetify. Ich habe den Code unten eingefügt (der Text ist auf Italienisch, weil ich Italiener bin, aber Sie verstehen, was ich meine):

<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>

Wenn Sie dies versuchen, werden Sie feststellen, dass die Karte „Registrierung“ (Registrierung) niedriger ist als die Anmeldekarte. Gibt es eine Möglichkeit (vorzugsweise mit CSS, aber ohne JS), die Höhe auf die gleiche Höhe wie die Anmeldekarten zu bringen, damit sie besser aussehen?

Danke! Einen schönen Tag noch!

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 的显示断点，在本例中，我将它们应用于 style 属性，但您可以将其与任何 html 属性和任何带有 js 的地方一起使用。

...




...