平武建站

CSS实现footer“吸底”效果

这篇文章主要介绍CSS实现footer“吸底”效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

10年积累的成都网站设计、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先建设网站后付款的网站建设流程，更有赤峰林西免费网站建设让你可以放心的选择与我们合作。

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

  • 一是无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是可滚动的。

  • 二是当内容区的内容较少时，页脚区不是随着内容区排布，而是始终显示在屏幕的最下方；当内容区的内容较多时，页脚能随着文档流撑开，始终显示在页面的最底部。
     

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

html设置：

         
           
       
  • 1.这是内容，这是内容……
    •        
  • 2.这是内容，这是内容……
    •        
  • 3.这是内容，这是内容……
    •        
  • 4.这是内容，这是内容……
    •        
  • 5.这是内容，这是内容……
    •        
  • 6.这是内容，这是内容……
    •        
  • 7.这是内容，这是内容……
    •        
  • 8.这是内容，这是内容……
    •        
  • 9.这是内容，这是内容……
    •           
                底部按钮   
     

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

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

    原理分析：

    适用场景：

    所使用的属性在各浏览器中都实现得很成熟，相比第二、三种方案，最为推荐该方法。 不适用于以下的场景：定位(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的高度，这也是这种方式的优点。

    固定于页面底部

    原理分析：

    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-固定于页面底部中的分析)，还有以下需要注意的地方：

    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

    原理分析：

    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

    以上是“CSS实现footer“吸底”效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


    标题名称：CSS实现footer“吸底”效果
    网站网址：http://pwwzsj.com/article/jsespc.html

    其他资讯