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

【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.lryc.cn/news/207363.html

相关文章:

  • Docker基础管理
  • 基于YOLOv8模型的烟雾目标检测系统(PyTorch+Pyside6+YOLOv8模型)
  • 【代码随想录01】数组总结
  • (SpringBoot)第二章:Spring创建和使用
  • 力扣刷题 day56:10-26
  • 『第四章』一见倾心:初识小雨燕(上)
  • elasticsearch-7.9.3 单节点启动配置
  • 【2024秋招】2023-10-9 同花顺后端笔试题
  • 完美的错误处理:Go 语言最佳实践分享
  • vue首页多模块布局(标题布局)
  • 嵌入式系统>嵌入式硬件知识
  • LeetCode 1402. 做菜顺序【排序,动态规划;贪心,前缀和,递推】1679
  • 【多线程】探索Java中的多线程编程
  • 【算法题】翻转对
  • 适用于 Mac 或 Windows 的 4 种最佳 JPEG/PNG图片 恢复软件
  • 位置信息API
  • MySQL——九、SQL编程
  • threejs(4)-纹理材质高级操作
  • Redis | 数据结构(01)
  • 一文详解多模态大模型发展及高频因子计算加速GPU算力 | 英伟达显卡被限,华为如何力挽狂澜?
  • debian 10 安装apache2 zabbix
  • Qt之菜单栏、工具栏、状态栏介绍及工具栏QAction的动态增删显示实现方式
  • 十四天学会C++之第八天:文件操作
  • 基于(N-1)×(N-1)棋盘的解的情况推出N×N棋盘的解的情况的N皇后问题
  • Vue mixin混入
  • 基于 FFmpeg 的跨平台视频播放器简明教程(十):在 Android 运行 FFmpeg
  • 正点原子嵌入式linux驱动开发——Linux LCD驱动
  • 2-Java进阶知识总结-6-多线程
  • openwrt下游设备在校园网(DLUT-LingShui)中使用ipv6网络
  • 10个基于.Net开发的Windows开源软件项目