Vuetify Fullscreen property not creating an element with height:100% - vue.js

Question

I am still very new to the Vue.js and Vuetify frameworks. I am currently trying to create a front page element with a css property of height:100% in Vuetify, but for some reason I am unable to fill the page with the first row element.
As seen below, I am using the "fullscreen" Vuetify property in the v-row element.
Thanks!
<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>

Answer 1

I found a solution:
Adding a style element in the App.vue file to get the fullscreen class to function properly :
<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>