footer通常写版权信息等,显示在页面底部。如果页面内容过少,则footer会出现在屏幕中间位置,很尴尬。在 Tailwind 中,你可以使用flex来实现footer保持在屏幕或页面底部。
代码:
<div class="flex flex-col min-h-screen">
<slot />
<footer class="footer footer-center p-4 bg-base-300 text-base-content mt-auto">
<aside>
<p>Copyright © 2023 - All right reserved by airoom.chat</p>
</aside>
</footer>
</div>
用flex包裹全部页面内容,footer设置类名:mt-auto 即可。文章来源:https://www.toymoban.com/news/detail-714492.html
参考:playground文章来源地址https://www.toymoban.com/news/detail-714492.html
到了这里,关于【Tailwind CSS】当页面内容过少,怎样让footer保持在屏幕底部?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!