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">
<!-- 需要做到吸底的区域 -->
底部按钮css固定定位
</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系统中，⽂本框调⽤输⼊法时，定位的区域就会往上弹，离底部有段距离。
固定于页⾯底部
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
固定于可视窗⼝底部
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的⾼度，这也是这种⽅式的优点。
固定于页⾯底部
原理分析：
设置wrapper的min-height:100%，这⾥设置的是min-height⽽⾮height，是想使整个wrapper的最⼩⾼度撑开⾄全屏，即内容不⾜以充满屏幕时，wrapper的⾼度仍是全屏；当wrapper的⾼度随着content的⾼度增⼤⽽变化，它的⾼度是可以⼤于可视窗⼝⾼度，⽽不⼀直都等于屏幕的⾼度。
设置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属性。
原理分析：
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
原理分析：
wrapper设置height:100%是希望⽆论content内容的多少，它的⾼度都是屏幕的⾼度，如此⼀来，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，⽅便⼤家调试与验证，每个实现的⽅法都存在限制性问题，⽐如需要固定页脚⾼度，或不适⽤于移动端低版本的系统。⼤家可以根据具体的需求，选择最适合的⽅案。因为最近项⽬需要，从⽹上查阅了许多资料也⽆法得到拿来就可以⽤的解决⽅案，也缺少对实现原理的分析，所以就经过本⼈的总结与不断测试，写了这篇⽂章。希望能对⼩伙伴有⽤。第⼀次掘⾦经验，希望⼤家多多⿎励哟~
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。