黑马程序员技术交流社区

标题: 【上海校区】CSS实现footer“吸底”效果 [打印本页]

作者: 不二晨    时间: 2018-10-15 09:19
标题: 【上海校区】CSS实现footer“吸底”效果
我们经常会遇到这样的问题:如何用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对需固定元素定位原理分析适用场景所使用的属性在各浏览器中都实现得很成熟,相比第二、三种方案,较为推荐该方法。不适用于以下的场景:定位(fixed)的区域中有文本框,因为在ios系统中,文本框调用输入法时,定位的区域就会往上弹,离底部有段距离。
固定于页面底部
演示demo:codepen.io/hu0950/pen/…
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:codepen.io/hu0950/pen/…
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布局实现适用场景flex布局结构简单,代码精简。但flex有着兼容性问题,在使用这种方式布局时需要注意。在实现固定于页面底部的效果时,采用这种弹性布局的思想,底部固定区域的高度可灵活设置,无需定义footer的高度,这也是这种方式的优点。
固定于页面底部
演示demo:codepen.io/hu0950/pen/…
原理分析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复制代码
固定于可视窗口底部
演示demo:codepen.io/hu0950/pen/…
原理分析除了以上(在方案2-固定于页面底部中的分析),还有以下需要注意的地方:
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:codepen.io/hu0950/pen/…
原理分析: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:codepen.io/hu0950/pen/…
原理分析: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,方便大家调试与验证,每个实现的方法都存在限制性问题,比如需要固定页脚高度,或不适用于移动端低版本的系统等等。大家可以根据具体的需求,选择最适合的方案。
由于最近项目需要,从网上查阅了许多资料,很难得到拿来就可以用的解决方案,或是缺少对实现原理的分析,所以本人针对以上问题,做了相关总结,写下了这篇文章。希望能对小伙伴有用。文章有不对的地方或是写不好的地方,辛苦大家指正,也欢迎大家一起探讨解决“吸底”问题时,遇到的一些兼容性问题,或是提出一些更好的解决方案哟~


【转载】
作者:Sunflower127
链接:https://juejin.im/post/5bbc9cb4f265da0add51dc0f




作者: 不二晨    时间: 2018-10-15 16:00
奈斯




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2