Vuetify 2.2，为什么我的页脚没有在 Code Pen 上的绝对底部对齐？

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>

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

是否有任何我应该使用的缺失堆栈？谢谢你的建议。

Answer 1

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

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

Absolute prop 适用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>