Tailwind CSS 使页脚始终位于页面底部

Question

所以，我正在构建一个基本布局为

• 导航栏
• 内容
• 页脚

示例图片，取自：Tailwindcss：底部固定/粘性页脚

我的 App.vue 组件

  <div class="justify-center h-screen relative">
    <TheNavbar class="top-0"/>
    <div class="h-screen mb-auto">
      <router-view class="mb-auto" :key="$route.fullPath"/>
    </div>
    <Toast v-if="showToast" :message="showToast"/>
    <Footer class="relative" :footer_links="footer_links"/>  
  </div>

我希望页脚始终位于页面底部。当内容不够时，将Footer推到页面底部！

在我的内容上使用h-screen会将页脚推到底部。然而，在我需要滚动的页面上，页脚不会被向下推，而是会干扰内容。看图片...

当我摆脱班级时，问题就逆转了h-screen。现在，如果没有足够的内容，页脚就会爬到内容处，在其下方留下空白区域。

如何使页脚始终位于页面底部？

---

附录：

使用：

<Footer class="fixed inset-x-0 bottom-0"/>  

使页脚停留在页面底部。但是，现在当我滚动时，内容的底部被页脚剪切。

Answer 1

哈哈，我实际上从您提供的链接中得到了答案。Tailwindcss：底部固定/粘性页脚

第二个有 1 票赞成的答案对我来说是这样的。

<div class="fixed inset-x-0 bottom-0"> </div>

查看该职位的官方 TW 文档 - https://tailwindcss.com/docs/position

查看用于控制定位元素放置的实用程序 - https://tailwindcss.com/docs/top-right-bottom-left