Vuetify布局中如何调整流体容器，解决页脚遮挡表格内容的问题

问题描述 #

正在开发基于VueJS的应用，采用Vuetify作为前端框架，目前遇到布局适配问题：

• 承载主内容的流体容器无法正确适配页脚的占位逻辑
• 当主内容高度超出页面可视高度时，页脚会直接叠加遮挡在主内容上方

需要调整主内容容器，使其在展示表格类内容时能够自动预留对应页脚的高度空间，避免内容被遮挡。

对应代码示例 #

<div id="app">
  <v-app id="inspire">
    <v-app-bar color="primary white--text" light app clipped-left clipped-right fixed>
      <v-toolbar-title class="ml-0 pl-3">
        <v-app-bar-nav-icon @click.stop="navMenu = !navMenu" color="white"></v-app-bar-nav-icon>
        <span class="hidden-sm-and-down">Memory Infuser</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-app-bar>

    <v-main>
      <v-container fluid class="pt-0">
        <v-row class="pr-2 pl-2">
          <v-col cols="12">
            <v-data-table
              :headers="headers"
              :items="desserts"
              :items-per-page="20"
              class="elevation-1"
            ></v-data-table>  
          </v-col>
        </v-row>
      </v-container>
    </v-main>

    <v-footer app light color="primary white--text">
      <v-card tile flat class="text-center" color="primary" width="100%">
        <v-card-text class="white--text">
          Footer Text
        </v-card-text>
      </v-card>
    </v-footer>
  </v-app>
</div>

内容的提问来源于stack exchange，提问作者VerySeriousSoftwareEndeavours