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

这篇具有很好参考价值的文章主要介绍了【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文章来源地址https://www.toymoban.com/news/detail-714492.html

到了这里,关于【Tailwind CSS】当页面内容过少,怎样让footer保持在屏幕底部?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Tailwind CSS入门教程

    Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind是一款CSS框架,它的主要特点是提供了一系列的CSS类,可以快速地构建出各种样式。Tailwind的发展历史可以追溯到2017年,由Adam Wathan、Steve Schoger和Jonathan Reinink共同创建。Tailwind的设计理念是提供一系列的原子类,

    2024年02月13日
    浏览(36)
  • css样式-内容固定在页面底部,不随滚动条滚动

    目录 1、内容固定在页面底部,不随着滚动条滚动 2、添加内容,简单测试是否固定  position:                 1、【relative】相对定位;2、【absolute】绝对定位;                  3、【fixed】固定定位;4、【static】默认值;5、【sticky】粘性定位。 这里设置为fixed,

    2024年02月11日
    浏览(51)
  • Vue中使用Tailwind css

    1.什么是Tailwind 就是一个CSS框架,和你知道的bootstrap,element ui,Antd,bulma。一样。将一些css样式封装好,用来加速我们开发的一个工具。 Tailwind解释 tailwind css 中文文档 注意⚠️ 与预处理器一起使用 针对生产进行优化 浏览器支持 2.Vue使用Tailwind配置 1. 新建vue项目 2. 在终端输

    2024年02月13日
    浏览(37)
  • web前端html+css页面内容的六种隐藏方式

    一、使用透明度 语法:opacity:0 注意:元素消失,但是还会占据空间,只是视觉看不出来   二、使用display 语法:display:none 注意:元素消失,不会占据空间   三、scale 缩放 语法:transform:scale(0)    值大于1放大,小于1缩小 注意:元素消失,但是还会占据空间   四、使用vis

    2024年02月08日
    浏览(53)
  • 谈谈Tailwind CSS:实用优先的 CSS 框架到底好不好?

    探讨 Tailwind CSS 的实现优势,比较原生 CSS、预编译器 SCSS 和 Tailwind CSS 在一个简单登录页面上的效果。

    2024年02月01日
    浏览(42)
  • Tailwind css优于Bootstrap 7个原因

    在某些情况下,Tailwind css 比 Bootstrap 更好,因为它是一个低级 CSS 框架,可让您根据需要构建自己的自定义组件。如果使用得当,它非常注重性能,可以显着减少 CSS 负载并确保更快的渲染。如果 Web 性能和自定义是您的首要任务,请选择 Tailwind。 原因 1:Tailwind CSS 生成的 C

    2024年02月14日
    浏览(34)
  • 如何使用 `scrcpy` 保持手机屏幕关闭,电脑屏幕开启

    有时候,你可能需要在使用 scrcpy 时保持你的手机屏幕关闭,以节省电池,或者避免分散注意力。同时,你想让你的电脑屏幕一直保持开启,以确保你能够持续观看和操作手机屏幕。这就是 scrcpy 的 --turn-screen-off 选项派上用场的地方。 1. 安装 scrcpy 首先,确保你已经安装了

    2024年02月04日
    浏览(40)
  • naive ui和tailwind-css冲突解决方法

    tailwindcss侧的解决方法(推荐) 修改tailwind.config.js文件,禁用预加载 tailwind预加载,是为了保持一个新项目的风格统一,会把原本html自带的一些标签,如h1-h5, img,ul,padding等样式的默认风格和作用给移除掉,当然这对已有的项目集成tailwindcss是不友好的,所以可以禁用掉,详

    2024年02月09日
    浏览(37)
  • 1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。

            注意:         1.背景颜色用ppt的取色器来获取:                 先点击ppt的形状轮廓,然后点击取色器,吸颜色,然后再点击形状轮廓的其他轮廓颜色,即可获取到对应颜色。           2.表格间的灰色线是在th和td中用border属性设置的;         3.在js中拼

    2024年02月16日
    浏览(43)
  • 分享 10 个 Tailwind CSS UI 站点,助你快速启动项目

    Midjourney 创作,未来UI Tailwind CSS 是一个为快速创建定制化 UI 组件而设计的实用型框架。与其他 CSS 框架或库不同,Tailwind CSS 组件没有预先设置好样式。相反,您可以使用 Tailwind 的低级实用类来为 CSS 元素设置样式,如 margin、flex、color 等。 自从 2017 年发布以来,Tailwind CSS 在

    2024年02月06日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包