如何使用Tailwincss创建真正的粘性页眉/页脚(即使滚动也会粘在底部)？ [英] How create a TRUE sticky header/ footer using Tailwindcss (sticks to bottom even if scroll)?
问题描述
许多博客和帖子声称要使用Tailwincss创建粘性页脚(&Q；)，但我找不到认为有超过一行内容的内容：
例如，在中，如果主区域足够高可以滚动，都不会使用脚注。
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
.和几个代码示例。
有没有办法用Tailwincss创建一个小页脚，无论主内容区域有多长，它总是在屏幕上侧放？
推荐答案
在您共享的示例中，它们都希望主内容区域是滚动发生的位置。要做到这一点，您只需将overflow-hidden和h-screen添加到最外面的div或Body标记，并将overflow-y-scroll添加到主内容区域，该部分将获得自己的滚动条集，但如果操作正确，页面本身将不会有滚动条。以下是https://play.tailwindcss.com/A5Hs7ZtGad
归根结底，TailWind只是一个css，所以如果你能用css制作一些东西，你就可以用Tailind的实用程序类重新创建它。这个问题的另一个解决方案是，如果你只想让页脚(或任何div)位于所有其他内容的底部，并且你想要常规的滚动条，而不是给元素fixed bottom-0 left-0 w-full，它会有类似的结果，但如果你的内部元素没有足够的填充或页边距，它也可以覆盖内容。以下是https://play.tailwindcss.com/nna2QkrxlK示例
这篇关于如何使用Tailwincss创建真正的粘性页眉/页脚(即使滚动也会粘在底部)？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
