vuetify.js - Vuetify 2.2，为什么我的页脚没有在代码笔的绝对底部对齐？

Question

我在这个代码笔里面有一个代码笔我有 vuetify 2.2.15。

我使用页脚如下：

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-card>
          <v-card-text>
            Expected to align at bottom
          </v-card-text>
        </v-card>
      </v-container>
    <v-content>
    <v-footer>
      <v-col
        class="text-center"
      >
      footer
      </v-col>
    </v-footer>
  </v-app>
</div>

在网络上运行的真实代码中，这个页脚是在绝对底部对齐的。但是在代码笔中，页脚并没有在绝对底部对齐，而是相对地跟随上一个组件。

我应该使用任何缺失的堆栈吗？谢谢您的建议。

标签： vuetify.jsfootercodepen

Answer 1

你应该使用absolute你v-footer喜欢的：

<v-footer absolute>
    <v-col class="text-center">
      footer
    </v-col>
</v-footer>

absolute 属性适用position: absolute于组件。

你也应该</v-content>在你的页脚之后移动

你的最终代码应该是这样的：

<div id="app">
  <v-app>
    <v-content>
      <v-navigation-drawer app></v-navigation-drawer>
      <v-container>
        <v-card
        >
          <v-card-text
          >
            Expected to align at bottom
          </v-card-text>
        </v-card>
      </v-container>
    <v-footer absolute>
      <v-col
        class="text-center"
      >
      footer
      </v-col>
    </v-footer>
      </v-content>
  </v-app>
</div>