如何让Vuetify中的Footer占满整个视口宽度？

问题原因 #

Vuetify的v-footer组件默认会继承父容器（如v-app）的最大宽度限制，导致无法占满整个视口宽度，仅随内容宽度扩展。

解决方案 #

方法1：使用Vuetify内置属性直接设置 #

修改Footer.vue中的v-footer组件，添加width="100%"和max-width="100%"属性，强制组件占满视口宽度：

<template>
    <v-footer color="red" width="100%" max-width="100%">    
        <span class="mt-2">© {{ new Date().getFullYear() }} Hello World </span>
    </v-footer>
</template>

方法2：自定义样式强制覆盖 #

如果内置属性不生效，可通过自定义CSS强制修改footer的宽度限制：

<template>
    <v-footer color="red" class="full-width-footer">    
        <span class="mt-2">© {{ new Date().getFullYear() }} Hello World </span>
    </v-footer>
</template>

<style scoped>
.full-width-footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
}
</style>

方法3：调整v-app布局 #

确保v-app没有设置额外的内边距或最大宽度限制，可在App.vue中给v-app添加max-width="100%"：

<template>
  <v-app max-width="100%">
    <Footer/>
  </v-app>
</template>

说明 #

以上方法任选其一即可解决问题，优先使用方法1（Vuetify内置属性），避免自定义样式可能带来的兼容性问题。

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