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

Question

所以，我正在构建一个具有基本布局的网页

导航栏

内容

页脚

示例图片，取自: Tailwindcss: fixed/sticky footer on the bottom

我的 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 时，问题逆转了类(class)。现在如果没有足够的内容，页脚就会爬到内容，在它下面留下一个空白区域。

如何让页脚始终保持在页面底部？

附录 :
使用:

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

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

Answer 1

大声笑，我实际上是从您提供的链接中得到答案的。 Tailwindcss: fixed/sticky footer on the bottom
1 赞成票的第二个答案为我做到了。

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

查看该职位的官方 TW 文档 - https://tailwindcss.com/docs/position
查看用于控制定位元素放置的实用程序 - https://tailwindcss.com/docs/top-right-bottom-left