Vuetify bottom nav cutting content

Question

My bottom nav is cutting the content in my body, I've tried to put if fixed but then it just goes right down to the bottom

This is how it looks right now:

This is my code, I can't add the code to this question because it won't show u, but this is my bottom nav code

This is how the code looks:

Answer 1

Wrap your content into <v-content></v-content> element and add app property to <v-bottom-nav> as mentioned by Traxo.
Working example: https://codepen.io/anon/pen/YRoexV

Answer 2

Since the release v2.3.0 https://github.com/vuetifyjs/vuetify/releases/tag/v2.3.0

v-content is now v-main, so the new way to structure this is something like this:

App.vue:

<template>
  <v-app>

    <AppBar/>

    <v-main>
      <router-view></router-view>
    </v-main>

    <BottomNavigation/>

  </v-app>
</template>

BottomNavigation.vue:

<template>
  <v-container>
  <v-bottom-navigation
    fixed
    app
  >
    <v-btn>
      <span>Recents</span>
      <v-icon>mdi-history</v-icon>
    </v-btn>

    <v-btn>
      <span>Favorites</span>
      <v-icon>mdi-heart</v-icon>
    </v-btn>

    <v-btn>
      <span>Nearby</span>
      <v-icon>mdi-map-marker</v-icon>
    </v-btn>
  </v-bottom-navigation>
  </v-container>
</template>