全国服务热线:4008-888-888

技术知识

CSS完成footer“吸底”实际效果

大家常常会遇到这样的难题:怎样用css来完成底部元素可“粘住底部”的实际效果,针对“粘住底部”,本文有两种了解:

  • 1是不管內容的是多少,大家都期待使按钮,固定不动于可视性对话框的底部,且內容区是可翻转的。
  • 2是当內容区的內容较少时,页脚区并不是伴随着內容区排布,而是自始至终显示信息在显示屏的最正下方;当內容区的內容较多时,页脚能伴随着文本文档流撑开,自始至终显示信息在网页页面的最底部。
     

谈到“吸底”实际效果的完成,大伙儿将会较多掌握到的是sticky-footer合理布局,但这个方法大多数是用来处理第2种状况的完成。本文将选用下列的3种计划方案来各自来完成以上这两种实际效果,并简易完成的基本原理和其的可用状况。 器皿(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前1个弟兄元素)的padding-bottom值超过等于footer的height值,便可确保content中內容不容易被底部的footer地区所遮盖。
  • 设定footer精准定位方法,这里要差别两种实际效果:若是期待footer固定不动于网页页面底部,此时设定wrapper的position:relative,相应地,为footer设定position:absolute,使footer相对wrapper肯定精准定位,这样1来,不管內容的是多少,footer仍然能够固定不动在网页页面的最底部;而期待固定不动于可视性对话框底部,为footer设定position:fixed,并设定相应精准定位便可。
  • 设定height为固定不动高宽比值。

可用情景:

所应用的特性在各访问器中都完成得很完善,相比第2、3种计划方案,最为强烈推荐该方式。 不可用于下列的情景:精准定位(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的高宽比增大而转变,它的高宽比是能够超过可视性对话框高宽比,而不1直都等于显示屏的高宽比。
  • 设定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的高宽比转变而提升的,这样1来,就可以确保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內容的是多少,它的高宽比全是显示屏的高宽比,这般1来,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,便捷大伙儿调节与认证,每一个完成的方式都存在限定性难题,例如必须固定不动页脚高宽比,或不可用于挪动端低版本号的系统软件。大伙儿能够依据实际的要求,挑选最合适的计划方案。 由于近期新项目必须,从在网上查阅了很多材料也没法获得拿来便可以用的处理计划方案,也缺乏对完成基本原理的剖析,因此就历经自己的总结与持续检测,写了这篇文章内容。期待能对小伙子伴随用。第1次掘金工作经验,期待大伙儿多多激励哟~

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服