音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

CSS实现footer“吸底”效果
日期:2021-09-06 00:00:20   来源:脚本之家

我们经常会遇到这样的问题:如何用css来实现底部元素可“粘住底部”的效果,对于“粘住底部”,本文有两种理解:

  • 一是无论内容的多少,我们都希望使按钮,固定于可视窗口的底部,且内容区是可滚动的。
  • 二是当内容区的内容较少时,页脚区不是随着内容区排布,而是始终显示在屏幕的最下方;当内容区的内容较多时,页脚能随着文档流撑开,始终显示在页面的最底部。
     

谈到“吸底”效果的实现,大家可能较多了解到的是sticky-footer布局,但这个方式大多是用来解决第二种情况的实现。本文将采用以下的三种方案来分别来实现以上这两种效果,并简单实现的原理以及其的适用情况。 容器(wrapper)包含两部分,分别是内容(content)和底部需固定的区域(footer)。

html设置:

<!-- wrapper是包裹content和footer的父容器 --></div>
<div class="wrapper">
   <div class="content">
     <ul>
       <!-- 页面主体内容区域 --></div>
       <li>1.这是内容,这是内容……</li>
       <li>2.这是内容,这是内容……</li>
       <li>3.这是内容,这是内容……</li>
       <li>4.这是内容,这是内容……</li>
       <li>5.这是内容,这是内容……</li>
       <li>6.这是内容,这是内容……</li>
       <li>7.这是内容,这是内容……</li>
       <li>8.这是内容,这是内容……</li>
       <li>9.这是内容,这是内容……</li>
      </ul>
   </div>
  <div class="footer">
    <!-- 需要做到吸底的区域 -->
    底部按钮
  </div>
 </div>

说明:以下方案的实现都基于这段html结构

方案1:使用position对需固定元素定位

原理分析:

  • 我们希望wrapper的外容器(包括html、body)的高度充满整个屏幕,即设置高度height:100%,且设置wrapper的min-height:100%,这里设置的是min-height而不是height,是为了保证整个wrapper的最小高度可撑开至全屏,即使内容不足以充满屏幕时,wrapper的高度仍是全屏的高度;当wrapper的高度随着content的高度变化而增大,它的高度是可以大于可视窗口的高度。
  • 设置content(需要显示内容的容器,footer前一个兄弟元素)的padding-bottom值大于等于footer的height值,即可保证content中内容不会被底部的footer区域所覆盖。
  • 设置footer定位方式,这里要区别两种效果:若是希望footer固定于页面底部,此时设置wrapper的position:relative,相应地,为footer设置position:absolute,使footer相对于wrapper绝对定位,这样一来,无论内容的多少,footer依然可以固定在页面的最底部;而希望固定于可视窗口底部,为footer设置position:fixed,并设置相应定位即可。
  • 设置height为固定高度值。

适用场景:

所使用的属性在各浏览器中都实现得很成熟,相比第二、三种方案,最为推荐该方法。 不适用于以下的场景:定位(fixed)的区域中有文本框,因为在ios系统中,文本框调用输入法时,定位的区域就会往上弹,离底部有段距离。

固定于页面底部

演示demo:https://codepen.io/hu0950/pen/yRVvQL

css设置:

html,
body
  height 100%
.wrapper
  position relative // 关键
  box-sizing border-box
  min-height 100% // 关键
  padding-bottom 100px   // 该值设置大于等于按钮的高度
  ul
    list-style none
    li
      height 100px
      background lightblue
.footer
  position absolute // 关键
  bottom 0
  left 0
  right 0
  height 100px // 设置固定高度
  background orange

固定于可视窗口底部

演示demo:https://codepen.io/hu0950/pen/NObMPb?editors=1100#0

css设置:

html,
body
  height 100%
.wrapper
  box-sizing border-box
  min-height 100% // 关键
  padding-bottom 100px   // 该值设置大于等于按钮的高度
  ul
    list-style: none
    li
      height 100px
      background lightblue
.footer
  position fixed // 使按钮固定于可视窗口的底部
  bottom 0
  left 0
  right 0
  height 100px  // 设置固定高度
  background orange

方案2:使用flexbox布局实现

演示demo:https://codepen.io/hu0950/pen/bmBMMr

适用场景:

flex布局结构简单,代码精简。但flex有着兼容性问题,在使用这种方式布局时需要注意。 在实现 固定于页面底部 的效果时,采用这种弹性布局的思想,底部固定区域的高度可灵活设置,无需定义footer的高度,这也是这种方式的优点。

固定于页面底部

原理分析:

  • 设置wrapper的min-height:100%,这里设置的是min-height而非height,是想使整个wrapper的最小高度撑开至全屏,即内容不足以充满屏幕时,wrapper的高度仍是全屏;当wrapper的高度随着content的高度增大而变化,它的高度是可以大于可视窗口高度,而不一直都等于屏幕的高度。
  • 设置wrapper的布局方式为flex,且content的flex:1,使content的高度始终为wrapper的减去底部footer的高度。

css设置:

html,
body
  height 100%
.wrapper
  min-height 100% // 关键
  display flex // 关键
  flex-direction column // 关键
.content
  flex 1  //关键
  ul
    list-style none
    li
      height 100px
      background lightblue
// 高度可不设置
.footer
    padding 20px
    background orange

固定于可视窗口底部

原理分析:

除了以上(在方案2-固定于页面底部中的分析),还有以下需要注意的地方:

  • 由于footer因设置了fixed而脱离了文档流,因此需给wrapper设置padding,该值应大于等于按钮的高度,这样才能保证footer不会覆盖content区域的内容。
  • 设置footer定位方式为fixed,并设置相应定位,即可使footer固定于可视窗口的底部。

css设置:

html,
body
  height 100%
.wrapper
  display flex // 关键
  min-height 100% // 关键
  padding-bottom 62px // 该值设置大于等于按钮的高度
  flex-direction column // 关键
.content
  flex 1  //关键
  ul
    list-style: none
  li
    height 100px
    background lightblue
.footer
  position fixed  // 关键
  left 0
  right 0
  bottom 0
  padding 20px
  background orange

方案3:使用calc实现

适用场景

该方案不需要任何额外样式处理,代码简洁,但遗憾的是移动端的低版本系统不兼容calc属性。

固定于页面底部 演示demo:https://codepen.io/hu0950/pen/ePBjdB

原理分析:

wrapper设置min-height:100%是希望content在内容少时,高度能充满整个屏幕,同时,当content的内容增加至高度大于屏幕时,wrapper的高度仍能是随着content的高度变化而增加的,这样一来,就能保证footer会依次排列在content的下边。

css设置:

html,
body
  height 100%
.wrapper
  min-height 100% //关键:是min-height而不是height
.content
  min-height calc(100% - 100px) //关键:是min-height而不是height
  ul
    list-style none
  li
    height 100px
    background lightblue
// 高度固定
.footer
  height 100px
  background orange

固定于可视窗口底部 演示demo:https://codepen.io/hu0950/pen/bmBjqb?editors=1100#0

原理分析:

  • wrapper设置height:100%是希望无论content内容的多少,它的高度都是屏幕的高度,如此一来,content的高度=父元素wrapper高度-底部需固定元素footer的高度,最后还需要为content加上overflow:scroll,使content中隐藏的部分也可通过滚动显示。
  • content的父元素wrapper设置了height:100%,保证content的高度在计算时,100%固定等于屏幕的高度,而不会是随着content内容的高度变化的。

css设置:

html,
body,
.wrapper
  height 100%
.content
  height calc(100% - 100px) // 关键:使用height,而不是min-height
  overflow scroll // 关键
  ul
    list-style none
    li
      height 100px
      background lightblue
.footer
  position fixed
  left 0
  right 0
  bottom 0
  height 100px
  background orange

写在最后

以上几种实现方案,笔者都在项目中尝试过,对每个方案也都给出了demo,方便大家调试与验证,每个实现的方法都存在限制性问题,比如需要固定页脚高度,或不适用于移动端低版本的系统。大家可以根据具体的需求,选择最适合的方案。 因为最近项目需要,从网上查阅了许多资料也无法得到拿来就可以用的解决方案,也缺少对实现原理的分析,所以就经过本人的总结与不断测试,写了这篇文章。希望能对小伙伴有用。第一次掘金经验,希望大家多多鼓励哟~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    教程标签
    HTMLCSSDreamweaverFrontpage