如何使用 vuetify 使页脚与内容的宽度相同？答案

【问题标题】：How to make the footer the same width as the content using vuetify?如何使用 vuetify 使页脚与内容的宽度相同？
【发布时间】：2019-12-19 03:25:13
【问题描述】：

此代码中的页脚扩展了整个窗口的宽度。我希望它与<v-content>的宽度相同

  <v-app>
    <v-navigation-drawer permanent app>
    </v-navigation-drawer>
    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>
    <v-footer app>
      <p>&copy;</p>
    </v-footer>
  </v-app>

【问题讨论】：

你的描述对我来说还不够

标签： vue.js vuetify.js

【解决方案1】：

这是另一个工作示例，只需将 inset 添加到 v-footer

<v-app>
    <v-navigation-drawer permanent app>
    </v-navigation-drawer>
    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>
    <v-footer inset app>
      <p>&copy;</p>
    </v-footer>
 </v-app>

【讨论】：

【解决方案2】：

你不应该在<footer> 上使用app 属性，如果你希望它与内容的宽度相同，你应该把它放在<v-content> 里面，然后把absolute 属性，如下：

<v-app>
  <v-navigation-drawer permanent app>
  </v-navigation-drawer>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
    <v-footer absolute>
      <p>&copy;</p>
    </v-footer>
  </v-content>
</v-app>

编辑/方法 2：如果您想让页脚远离<content>，也可以使用<footer> 上的inset 属性从导航抽屉中偏移。

<v-app>
  <v-navigation-drawer permanent app>
  </v-navigation-drawer>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer inset app>
    <p>&copy;</p>
  </v-footer>
</v-app>

【讨论】：