时间戳

首页 > 解决方案 > 在 Vuetify 布局中调整流体容器

css - 在 Vuetify 布局中调整流体容器

问题描述

我正在使用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

标签： cssvue.jsvuejs2vuetify.js

解决方案

给v-footer组件一个absolute道具，如果你在页面的响应视图中仍然有问题，你应该像这样为组件设置height道具：v-footer

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

推荐阅读