解决网页底部粘连(Stiky footer)布局问题

网页底部粘连问题比较常见，群里很多网友都问到过这个问题。我这里集中分析一下该问题的解决方案。

底部粘连其实就是网页footer部分的布局定位问题。常见的就是网页底部的信息，会随着内容变化。如果定位不当，会在内容过多时，它遮盖了内容；在内容过少时，它又会和内容粘连在一起。这就是著名的网页底部粘连(stiky footer)布局问题。今天我推荐使用4种方法搞定它。

先看一下我们今天实现后的最终效果：

绝对定位

我们先使用绝对定位来解决这类问题。实现代码如下：

<style>
html,body{height:100%}
body{margin:0}
.box{position:relative;background-color:lightblue;min-height:100%;}
.content{padding-bottom:50px;}
.sticky{position:absolute;background-color:lightgreen;width:100%;height:50px;bottom:0;}
</style>
<div class="box">
  <main class="content">
    ：www.xttblog.com
	：www.xttblog.com
	：www.xttblog.com
	：www.xttblog.com
	：www.xttblog.com
	：www.xttblog.com
	：www.xttblog.com
    ...
  </main>
  <footer class="sticky"></footer>
</div>

实现方法是对(.sticky)footer进行绝对定位，假设高度为50px。对父级(.box)进行相对定位，将html、body的高度设置为100%，父级(.box)的最小高度设置为100%，将(.content)内容部分设置padding-bottom为footer的高度，即50px。

数学表达式calc

数学表达式calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。下面我们使用数学表达式calc来解决底部粘连(stiky footer)布局问题。

<style>
body{margin:0}
.content{background-color:lightblue;min-height: calc(100vh - 50px)}
.sticky{background-color:lightgreen;height:50px;}
</style>
<div class="box">
  <main class="content">
    ：www.xttblog.com
	：www.xttblog.com
	：www.xttblog.com
	：www.xttblog.com
	：www.xttblog.com
	：www.xttblog.com
  </main>
  <footer class="sticky"></footer>
</div>

由于绝对定位的实现要求最小高度100%的效果，给html、body都设置为高度100%，不利于代码扩展。因此可以使用100vh来代替100%，代码会简洁很多。内容部分(.content)设置最小高度为calc(100vh – 50px)。

flex 布局

上面的代码中，如果sticky的底部高度发生了变化，则内容部分的代码也需要进行相应地调整。如果使用flex，则可以更加灵活。为父级(.box)设置flex、上下排列及最小高度为100vh，为内容部分(.content)设置flex:1。

<style>
body{margin:0}
.box{display:flex;flex-flow:column;min-height:100vh;
background-color:lightblue;}
.content{flex:1;}
.sticky{background-color:lightgreen;height:50px;}
</style>

grid栅格布局

Grid布局方式借鉴了平面装帧设计中的格线系统，将格线运用在屏幕上，而不再是单一的静态页面，可以称之为真正的栅格。

<style>
body{margin:0}
.box{display:grid;grid-template-rows:1fr 50px;min-height:100vh;}
.content{background-color:lightblue;}
.sticky{background-color:lightgreen;}
</style>

grid作为最新布局方式实现起来代码更加简洁。

通过上面的4种实现方式，我们可以得出只要认真学习，任何技术问题都不在是问题。

： » 解决网页底部粘连(Stiky footer)布局问题