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

Question

我有一个code pen在这个代码笔里我有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>

在网络上的真实代码运行中，此页脚对齐在绝对底部。但是在码笔中，footer是NOT绝对底部对齐，只是相对跟在前面的组件

有没有我应该使用的缺失堆栈？谢谢你的建议。

Answer 1

您应该在 v-footer 中使用 absolute，例如：

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

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

Vuetify 2.2, Why my footer is not aligned at absolute bottom on the Code Pen?

footer

codepen

vuetify.js