当前位置: 首页 > article >正文

【Tailwind CSS】当页面内容过少,怎样让footer保持在屏幕底部?

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 即可。

参考:playground


http://www.kler.cn/a/105337.html

相关文章:

  • 2023 10月最新Vmd 下载安装教程,WindowsLinux
  • 【单片机学习笔记】Windows+Vscode+STM32F4+freeRTOS+FatFs gcc环境搭建
  • yyds,Elasticsearch Template自动化管理新索引创建
  • mysql创建自定义函数报错
  • 论文-分布式-分布式计算|容错-分布式控制下的自稳定系统
  • C#实现数据导出任一Word图表的通用呈现方法及一些体会
  • Nginx学习笔记01
  • PaddleX场景实战:PP-TS在电压预测场景上的应用
  • 【计算机网络】文件传输协议FTP和SFTP
  • DBeaver连接数据库报错:Public Key Retrieval is not allowed 的解决方案
  • Elasticsearch基础篇(六):es映射和常用的字段类型
  • python---闭包
  • Android Studio 导出 jar
  • 【JavaEE初阶】 线程安全的集合类
  • elementUI 中 date-picker 的使用的坑(vue3)
  • Redis | 数据结构(02)SDS
  • 解决Windows出现找不到mfcm90u.dll无法打开软件程序的方法
  • 第四章 文件管理 六、文件的基本操作
  • 第十一届蓝桥杯模拟赛第一期
  • 用IntelliJ远程打断点调试