<v-navigation-drawer> has come to the side of the footer

I would like to dynamically set the height value of a style that I set to an element. Specifically, when scrolling to the bottom, the height of the height is 77.5%, when the footer element is not visible at all, it is 100%, and when the footer is visible, it is the visible value I want to subtract the height from 100%.
I tried various things with handleScroll below, but I can't adjust the height well. Please let me know if there is a way to adjust

.v-navigation-drawer {
  height: 77.5% !important;
}

Below is the full code.

<template>
  <v-app>
    <Header />
    <!-- <TableofContents /> -->
    <v-navigation-drawer width="300" border="r" app> test </v-navigation-drawer>
    <v-main>
      <v-container>
        <slot />
      </v-container>
      <NavigationLink />
    </v-main>
    <v-footer border="t">
      <v-row justify="center" no-gutters>
        <AppThemeToggle />
        <v-col class="primary lighten-2 py-4 text-center white--text" cols="12">
          <strong
            >Copyright {{ new Date().getFullYear() }} vuetify
            Corporation</strong
          >
        </v-col>
      </v-row>
    </v-footer>
  </v-app>
</template>

When I put the footer in v-main, it became as follows.

<v-main>
      <v-container>
        <slot />
        <NavigationLink />
        <v-footer
          border="t"
          style="position: absolute; left: 0; right: 0; z-index: 9999"
        >
          <v-row justify="center" no-gutters>
            <AppThemeToggle />
            <v-col
              class="primary lighten-2 py-4 text-center white--text"
              cols="12"
            >
              <strong
                >Copyright {{ new Date().getFullYear() }} vuetify
                Corporation</strong
              >
            </v-col>
          </v-row>
        </v-footer>
      </v-container>
    </v-main>

If the content of the navigation covers the footer, I would like to scroll it like the image below

If I understand correctly, you want the navbar between header and footer:

------------                ------------
|  header  |                |  header  |
------------                ------------ 
| n |      |                | n |      |
| a | main |    instead of  | a | main |
| v |      |                | v |      |
------------                |   |-------
|  footer  |                |   | foot |
------------                ------------

Layout components like VAppBar, VNavigationDrawer or VFooter (with :app prop) work by claiming space in order they are declared, except for VMain, which will always claim the leftover space. So in above example, the left one has order header-footer-nav, while the right one has order header-nav-footer (same as your example).

So instead of manually adjusting height, just change the order of the elements:

<template>
  <v-app>
    <v-app-bar />
    <v-footer app> ... </v-footer>
    <v-navigation-drawer> ... </v-navigation-drawer>
    <v-main> ... </v-main>
  </v-app>
</template>

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

Vue.createApp({}).use(Vuetify.createVuetify()).mount('#app')

<!-- language: lang-html -->

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-app-bar>header</v-app-bar>
    <v-footer app border="t"> footer </v-footer>
    <v-navigation-drawer border="r" permanent>drawer</v-navigation-drawer>
    <v-main class="bg-grey"> Main content </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

<!-- end snippet -->

If you want the footer to scroll with the main content, you cannot use the app footer, as it is fixed on the page. I don't think there is an elegant solution to get the footer inside main yet over the nav bar. But you can put the footer into v-main and set absolute position on it:

<v-app>
  <v-app-bar>...</v-app-bar>
  <v-navigation-drawer>...</v-navigation-drawer>
  <v-main>
    ...
    <v-footer style="position: absolute; left: 0; right: 0; z-index: 9999;"
    >...</v-footer>
  </v-main>
</v-app>

see playground