实现底部元素“粘在底部”效果的CSS原理图和代码

如何使用css实现底部元素“粘在底部”效果。关于“粘在底部”，本文有两种理解：

1. 1 无论内容多少，我们都希望可视化窗口底部的按钮是固定的，内容区域是可滚动的。
2. 其次，当内容区域内容较少时，页脚区域不会与内容区域排列在一起，而是始终显示在屏幕底部；当内容区域中有更多内容时，页脚区域可以与文档一起流动。展开后它总是出现在页面的最底部。

说到实现“从下吸”的效果，大家可能对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结构

方案一：使用position来放置需要固定的元素

原理分析：

• wrapper的外层容器（包括html、body）的高度（包括html、body）占满整个屏幕，即设置height: 100%并设置wrapper的min-height: 100%，这里设置的不是height，而是min-height，以保证min-整个wrapper的高度可以拉伸到全屏时，即使内容不足以填满屏幕，wrapper的高度仍然是整个屏幕的高度；当wrapper的高度随着内容的高度增加时，他的高度可能大于可视窗口的高度。
• 设置内容（需要显示内容的容器，footer之前的同级元素）的padding-bottom值大于等于页脚高度的值，保证内容中的内容不被底部的页脚区域覆盖。
• 设置页脚如何定位。这里有两个效果需要区分：设置wrapper的position:relative，如果你希望页脚固定在页面底部。因此，为页脚设置position:absolute，以便页脚相对于wrapper 绝对定位。这样，无论内容有多少，页脚仍然可以固定在页面底部；如果你想将其固定在可视窗口的底部，请为页脚设置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
复制代码

固定在可视化窗口底部

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
复制代码

固定在可视化窗口底部可视化窗口 ♼ 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 布局实现

示例：codepen.io/hu0950/pen/…

有用场景❝

有用的场景结构简单，代码也简化。不过Flex存在兼容性问题，所以使用这种布局方式时需要小心。利用这种灵活的思路，实现了页面底部的固定效果。下固定面的高度可以灵活调整，无需定义页脚的高度。这也是该方法的一个优点。

固定在页面底部

分析原理：

• 设置wrapper的最小高度：100%。这里设置的是最小高度而不是高度。这是为了将wrapper的最小高度扩展到全屏。这意味着当内容不足以填满屏幕时，wrapper的高度仍然是全屏；当wrapper的身高随着内容的高度而变化时，他的高度可能大于视觉窗口的高度，而不总是等于屏幕的高度。
• 将wrapper的布局模式设置为flex，内容设置为flex:1，这样内容的高度始终是wrapper的高度减去页脚的高度。

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 - 固定在页面底部的分析）之外，还有以下内容注意：

• 由于页脚不在文档流中，由于设置为固定，因此需要设置 wrapper 的 padding。该值应大于或等于按钮的高度，以确保页脚不会覆盖内容区域的内容。
• 将页脚放置模式设置为固定，并设置相应的位置，将页脚固定在可视窗口的底部。

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
复制代码

方案三：使用calc来实现

适用场景

这个方案不需要任何额外的样式，代码简洁，可惜移动端的低版本系统不行与 calc 属性兼容。

固定在页面底部演示样本：codepen.io/hu0950/pen/…

分析原理：

• wrapper设置最小高度：100%，希望内容高度能够填满整个当内容较小时，wrapper的身高仍然可以随着内容高度的变化而增加。这样您可以确保页脚将按顺序排列在内容下方。

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/…

分析原理：

• wrapper高度设置：100%希望无论怎样很多内容，它的高度就是屏幕的高度。这样，内容的高度 = 父元素的高度 wrapper - 下面，需要固定元素页脚的高度。最后需要在内容中添加overflow:scroll，这样即使内容的隐藏部分也能通过。滚动显示。
• wrapper，父内容元素，设置高度为：100%，以保证计算内容高度时，100%固定为屏幕高度，不随内容高度变化。

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
来源：掘金