v-navigation-drawerがフッターにまで表示されてしまう

前提・実現したいこと

vuetifyのv-navigation-drawerタグを利用してナビゲーションメニューを正しく実装したい。

ナビゲーションメニューがフッターにまで表示されてしまい、正しく表示する事ができていない。
フッターの上からナビゲーションバーの下までにナビゲーションメニューがおさまるようにしたい。

発生している問題・エラーメッセージ

問題箇所の画像です。ナビゲーションメニューを開くと、フッターの上にかぶさって表示されてしまいます。

該当のソースコード

app.vue

vue
1<template>
2  <v-app id="app">
3    <v-app-bar color='purple' dark app clipped-left>
4      <v-app-bar-nav-icon @click="drawer=!drawer"></v-app-bar-nav-icon>
5      <v-toolbar-title>hoge</v-toolbar-title>
6    </v-app-bar>
7
8    <v-navigation-drawer app v-model="drawer" clipped>メニュー</v-navigation-drawer>
9
10    <v-content>
11
12    </v-content>
13
14    <v-footer color='purple' dark app>
15      hoge
16    </v-footer>
17  </v-app>
18</template>
19
20<script>
21export default {
22  data: function () {
23    return {
24      drawer: null
25    }
26  }
27}
28</script>
29
30<style scoped>
31p {
32  font-size: 2em;
33  text-align: center;
34}
35</style>

試したこと

vuetifyのドキュメントを探しましたが、height="500"等で高さを直接指定するなどの対応しか思い浮かばず、デザインが不格好となってしまいました。

補足情報（FW/ツールのバージョンなど）

"dependencies": {
"@rails/webpacker": "5.2.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.12",
"vuetify": "^2.2.11"
}
RubyonRails 5.2.3