Tailwind CSS 使页脚始终停留在页面底部答案

【问题标题】：Tailwind CSS make Footer always stay at bottom of pageTailwind CSS 使页脚始终停留在页面底部
【发布时间】：2021-10-05 22:52:26
【问题描述】：

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

导航栏
内容
页脚

示例图片，取自：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 类时，问题就逆转了。现在，如果没有足够的内容，页脚就会爬到内容，在其下方留下一个空白区域。

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

附录：

使用：

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

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

【问题讨论】：

这能回答你的问题吗？ Tailwindcss: fixed/sticky footer on the bottom
@Amal nandan，很遗憾没有。我有与我的问题中提到的相同的问题。当页面上没有足够的内容时，页脚被向下推，但是当有足够的内容时，页脚保持固定并将我的内容减半
你不能将最小高度设置为 100vh 之类的东西，这样如果没有内容，页脚上方 div 的高度也会将页脚向下推

标签： javascript css tailwind-css

【解决方案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

【讨论】：