在 Vuetify 布局中调整流体容器

Question

我正在使用 Vuetify 作为我正在开发的 VueJS 应用程序的前端框架，但是在将包含主要内容的流体容器调整为为页脚添加底层。当内容扩展超过页面高度时，页脚会覆盖内容。如何调整主内容容器，以便在显示表格内容时考虑页脚的高度？

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

https://codepen.io/deftonez4me/pen/WNoyrGY

Answer 1

给v-footer 组件一个absolute 属性，如果您在页面的响应式视图中仍然有问题，您应该为v-footer 组件设置height 属性，如下所示：

<v-footer app light absolute :height="80" color="primary white--text">
   ...
</v-footer>