很多博客和帖子声称使用 Tailwindcss 创建“粘性页脚”，但我找不到thought关于内容超过简短的“hello world”行的情况：
例如在none在这些示例中，如果主区域足够高可以滚动，则页脚会“粘住”。
https://www.gomasuga.com/blog/creating-a-sticky-footer-with-tailwind https://www.gomasuga.com/blog/creating-a-sticky-footer-with-tailwind
Tailwindcss：底部固定/粘性页脚 https://stackoverflow.com/questions/59812003/tailwindcss-fixed-sticky-footer-on-the-bottom
https://medium.com/@milanchheda/sticky-footer-using-tailwind-css-1c757ea729e2 https://medium.com/@milanchheda/sticky-footer-using-tailwind-css-1c757ea729e2
...以及几个 codepen 示例。
有没有一种方法可以使用 Tailwindcss 创建一个小页脚，无论主要内容区域有多长，该页脚始终显示在屏幕上？
在您共享的示例中，他们都希望主要内容区域是滚动发生的位置。为此，您只需添加overflow-hidden and h-screen到最外面的 div 或 body 标签并且overflow-y-scroll到主要内容区域，该部分将获得它自己的一组滚动条，但如果做得正确，页面本身将不会有滚动条。这是 Tailwind 游戏中的一个示例https://play.tailwindcss.com/A5Hs7ZtGad https://play.tailwindcss.com/A5Hs7ZtGad
最后，Tailwind 只是 CSS，所以如果您可以使用 CSS 制作一些东西，您可以使用 Tailwind 的实用程序类重新创建它。此问题的另一个解决方案是，如果您只想将页脚（或任何 div）保留在所有其他内容之上的底部，并且您想要常规滚动条，那么您可以给该元素fixed bottom-0 left-0 w-full它会产生类似的结果，但如果您的内部元素没有足够的填充或边距，它也能够覆盖内容。这是一个例子https://play.tailwindcss.com/nna2QkrxlK https://play.tailwindcss.com/nna2QkrxlK
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
