Je suis encore très nouveau sur les frameworks Vue.js et Vuetify. J'essaie actuellement de créer un élément de page d'accueil avec une propriété css de hauteur: 100% dans Vuetify, mais pour une raison quelconque, je ne parviens pas à remplir la page avec l'élément de première ligne.

Comme on le voit ci-dessous, j'utilise la propriété Vuetify "plein écran" dans l'élément v-row.

Merci!

<template>
      <div class="home">
        <v-row class="grey fullscreen" align="center" justify="space-around">
          <v-col xs=12 md=5>
            <h1 class="main-title">Clever and<br> Practical Designs<span class="redDot">.</span></h1>
            <h3 class="sub-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo exercitationem repellat, officia consequuntur obcaecati voluptate cum voluptas placeat dolores temporibus vel ex saepe reprehenderit porro asperiores cumque distinctio accusantium optio.</h3>
              <v-row>
                <v-btn href="" class="button white--text pa-4">
                View our Products
                </v-btn>
              </v-row>
          </v-col>
          <v-col xs=12 md=5>
            <v-img contain class="homeimg" max-width="500px" src="../assets/Large_product.png"></v-img>
          </v-col>
        </v-row>
      </div>
</template>
0
Kinston 18 févr. 2020 à 18:53

1 réponse

Meilleure réponse

J'ai trouvé une solution:

Ajout d'un élément de style dans le fichier App.vue pour que la classe plein écran fonctionne correctement :

<template>
  <v-app>
    <Navbar />
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'App',
  components: { Navbar },
  data: () => ({
    //
  }),
};
</script>
<style lang="scss">
.fullscreen {
  width: 100%;
  height: 100vh;
}
</style>
0
Kinston 18 févr. 2020 à 16:14