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对需固定元素定位

原理分析:

  • 我们希望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

CSS实现footer“吸底”效果

扫一扫手机访问