ある要素に設定するスタイルのheightの値を動的に設定したいと考えています。具体的には、一番下までスクロールしていた時は、heightの高さを77.5%、まったくフッター要素が見えていないときは、100%,フッターが見えていた場合は、見えている数値分100%から高さを引きたいと考えています。  
下記handleScrollにて色々と試してみたのですが、うまいこと高さを調整することが出来ません。調節する方法がありましたら教えて頂けましたら幸いです

```

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

以下はコードの全文になります。

```

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

[![スクリーンショット](https://i.stack.imgur.com/5VepE.png)](https://i.stack.imgur.com/5VepE.png)
CC BY-SA 4.0
2023-08-10T00:49:45.853
95905
2023-08-10T00:50:18.887
2023-08-10T00:50:18.887
24413
24413
question
javascript vue.js nuxt.js
<v-navigation-drawer>がfooterの横にまで来てしまっている