Container sitting behind navigation - vue.js

Question

My toolbar and sidenav sit on top of my container obstructing view of the contents.
I can easily put a top margin on the container to rectify the issue with the toolbar but because the sidenav retracts when screen width is reduced trying to do the same with the sidenav results in display issues.
App.vue
<template>
<v-app>
<Navs/>
<div class="div" style="margin-top: 64px;">
<router-view/>
</div>
<Footer/>
</v-app>
</template>
Navs.vue
<template>
<div class="content">
<!-- Sidenav draw -->
<v-navigation-drawer
class = "NavDark"
persistent
:mini-variant="true"
:clipped="clipped"
v-model="drawer"
enable-resize-watcher
mobile-break-point="1000"
app
>
<v-layout align-center justify-space-between fill-height column>
<v-layout align-center justify-start fill-height column>
<!-- Logo square -->
<div style = "height: 64px; width: 82px; position: absolute; z-index: -1;">
<Granim/>
</div>
<div style = "height: 64px;">
<v-container pa-0 bg fill-height grid-list-md text-xs-center>
<v-layout row wrap align-center>
<v-flex pa-0>
<v-list-tile-avatar>
<img src="#/assets/layout/sidebar/whitelogo.png" class="logo">
</v-list-tile-avatar>
</v-flex>
</v-layout>
</v-container>
</div>
<!-- </v-toolbar> -->
<!-- Items at the top of the sidenav -->
<v-list dark>
<v-list-tile
v-for="item in topMenuItems"
:key="item.title"
:to="item.path"
style="padding: 10px, 0px, 10px , 0px"
>
<v-tooltip right>
<v-list-tile-action
slot="activator"
>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>{{ item.title }}</v-list-tile-content>
</v-tooltip>
</v-list-tile>
</v-list>
</v-layout>
<v-list dark>
<!-- </v-layout> -->
<v-layout align-center justify-end column fill-height>
<v-menu
v-model="menu"
:close-on-content-click="false"
:nudge-width="200"
offset-x
>
<v-btn
slot="activator"
dark
icon
>
<v-icon>person</v-icon>
</v-btn>
<v-card>
<v-list>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ user.email }}</v-list-tile-title>
<v-list-tile-sub-title>{{ user.token }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat #click="menu = false">Cancel</v-btn>
<v-btn color="primary" flat #click="menu = false">Settings</v-btn>
<v-btn color="error" flat #click="userSignOut">Logout</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</v-layout>
</v-list>
</v-layout>
</v-navigation-drawer>
<v-toolbar
app
class ="elevation-0"
color="#eee"
:clipped-left="clipped"
>
<v-toolbar-side-icon
class="hidden-md-and-up"
#click="drawer = !drawer">
</v-toolbar-side-icon>
<v-toolbar-title v-text="title" class="toolbar-text"></v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-title v-if="user" v-text="user.email" class="toolbar-text"></v-toolbar-title>
</v-toolbar>
</div>
</template>
<style>
.NavDark {
height: 100vh;
box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}
</style>
Ideally I'm trying to find a solution in which the <router-view/> will not overlap with <Navs/> and fill all available space on the screen not taken by the toolbar and sidenav.

Answer 1

Resolved by using v-content
<template>
<v-app>
<Navs/>
<v-content class="light">
<router-view/>
</v-content>
<Footer/>
</v-app>
</template>