如何使用 Tailwindcss 创建真正的粘性页眉/页脚（即使滚动也粘在底部）？

Question

Lot of blogs and posts purport to create a "sticky footer" using Tailwindcss, but none that I can find thought about the case where there is more than a short "hello world" line of content:

For example in none of these examples does the footer "stick" if the main area is tall enough to scroll.

https://www.gomasuga.com/blog/creating-a-sticky-footer-with-tailwind

Tailwindcss: fixed/sticky footer on the bottom

https://medium.com/@milanchheda/sticky-footer-using-tailwind-css-1c757ea729e2

... and several codepen examples.

Is there a way with Tailwindcss to create a small footer that is alway sidsplaye don the screen regardless of how long the main content area is?

Answer 1

在您共享的示例中，他们都希望主要内容区域是滚动发生的位置。为此，您只需将overflow-hidden和添加h-screen到最外面的 div 或 body 标记以及overflow-y-scroll主要内容区域，该部分将获得它自己的一组滚动条，但如果做得正确，页面本身将不会有滚动条。以下是 Tailwind 播放的示例https://play.tai​​lwindcss.com/A5Hs7ZtGad

最后，Tailwind 只是 CSS，所以如果您可以使用 CSS 制作一些东西，您可以使用 Tailwind 的实用程序类重新创建它。此问题的另一个解决方案是，如果您只想将页脚（或任何 div）保留在所有其他内容之上的底部，并且您想要常规滚动条，那么您可以给该元素提供fixed bottom-0 left-0 w-full类似的结果，但也会有如果您的内部元素没有足够的填充或边距，则能够覆盖内容。这是一个例子https://play.tai​​lwindcss.com/nna2QkrxlK

Answer 2

我主要使用 flex 解决了这个问题，最外面的 div 使用类min-h-screen，页面内容使用flex-grow类。

此解决方案不会为像 hello world 页面这样的小内容显示滚动条，但如果页面内容扩展得足够大，则会显示滚动条。

<div class="flex flex-col min-h-screen">
  <header class="sticky z-50 bg-gray-300 top-0 p-4">
    header contents
  </header>
  <div class="flex-grow">
    <main>
        <div>
          <!-- ADD MORE TEXT FOR THE SCROLL BAR TO APPEAR -->
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat quos dignissimos doloremque enim necessitatibus accusamus dolorum aperiam, at tempora vel?
        </div>
    </main>
  </div>
  <footer class="sticky z-50 bg-gray-300 bottom-0 p-4">
    footer contents
  </footer>
</div>

随意自己尝试一下：

https://play.tai​​lwindcss.com/3MEiKoraDl

@JHeth 很接近，但如果您使用他们的解决方案，滚动条始终存在。