文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS如何实现内容高度不够的时候底部(footer)自动贴底

2023-06-08 03:05

关注

这篇“CSS如何实现内容高度不够的时候底部(footer)自动贴底”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“CSS如何实现内容高度不够的时候底部(footer)自动贴底”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。

在 UI 切图过程中,页面往往由三个部分组成,头部、内容和底部。当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多出很多空白,非常影响美观。

方案 1:Flex-Box

头部使用 position: sticky; 吸顶,再使用盒子( main )来包住内容( container > content )和底部( footer ),这个盒子设置最小高度为除头部外的剩余屏幕高度: min-height: calc(100vh - 50px); ,盒子里面使用弹性布局( flex: 1 1 auto; )让内容区域自动撑开,而底部保持不变( flex: 0 0 auto; ),这样就有了 内容不够时底部自动吸底,内容足够时底部自动下移 的效果。

示例:

<html>  <head>    <title>CSS 实现底部(footer)贴底 - 方案 1:Flex-Box</title>    <style>      body {        margin: 0;      }      header {        height: 50px;        background: #20c997;        position: sticky;        top: 0;      }      main {        display: flex;        flex-flow: column nowrap;        min-height: calc(100vh - 50px);      }      .container {        flex: 1 1 auto;      }      .content {        background: #0d6efd;      }      footer {        flex: 0 0 auto;        background: #fd7e14;      }    </style>  </head>  <body>    <!--头部-->    <header>      header    </header>    <main>      <div class="container">        <!--内容-->        <div class="content">          content        </div>      </div>      <!--底部-->      <footer>        footer      </footer>    </main>  </body></html>

在线演示: https://codepen.io/mazeyqian/pen/rNeymdG

优点:底部高度可自由撑开。

缺点:低版本浏览器有兼容性(Flex-Box & Calc)问题。

方案 2:底部负距离 margin

内容区设置最小高度铺满页面,然后底部设置等高的负距离 margin 。

示例:

<html>  <head>    <title>CSS 实现底部(footer)贴底 - 方案 2:底部负距离 `margin`</title>    <style>      body {        margin: 0;      }      header {        height: 50px;        background: #20c997;        position: sticky;        top: 0;      }      .container {        min-height: calc(100vh - 50px);      }      .content {        background: #0d6efd;      }      footer {        height: 50px;        margin-top: -50px;        background: #fd7e14;      }    </style>  </head>  <body>    <!--头部-->    <header>      header    </header>    <div class="container">      <!--内容-->      <div class="content">        content      </div>    </div>    <!--底部-->    <footer>      footer    </footer>  </body></html>

感谢你的阅读,希望你对“CSS如何实现内容高度不够的时候底部(footer)自动贴底”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯