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

Question

这段代码中的页脚扩展了整个窗口宽度。我希望它与<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>

Answer 1

如果希望宽度与内容相同，则不应在<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>

Answer 2

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

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