Vuetify v-card fits all heights possible in v-col

Question

I'm building a login/registration page using vue and vuetify. I put the code below (the text is in Italian because I'm Italian, but you get the idea):

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

If you try this, you will see that the "registration" (registration) card is lower in height than the login card. Is there a way (preferably with CSS, but without JS) to make the height the same as the login cards so they look better?

Thanks! Have a nice day!

Answer 1

Check this codesandbox I made: https://codesandbox.io/s/stack-70836234-11sck?file=/src/components/CardHeight.vue

Remove align="center" from v-row. Then just add the css height:100% to your v-card

renew: To set a fixed height for v-card only on mobile views, you can use vuetify's display breakpoints, in this case I applied them to style attribute, but you can use it with any html attribute and anywhere with js.

...




...