Свойство Vuetify Fullscreen не создает элемент с высотой: 100% - PullRequest
Новая
       8

Свойство Vuetify Fullscreen не создает элемент с высотой: 100%

0 голосов
/ 18 февраля 2020

Я все еще очень плохо знаком с фреймворками Vue. js и Vuetify. В настоящее время я пытаюсь создать элемент передней страницы со свойством css высоты: 100% в Vuetify, но по какой-то причине я не могу заполнить страницу первым элементом строки.

Как показано ниже , Я использую "полноэкранный" свойство Vuetify в элементе v-строки.

Спасибо! 

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

1 Ответ

0 голосов
/ 18 февраля 2020

Я нашел решение:

Добавление элемента стиля в файл App. vue для правильной работы полноэкранного класса: 

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