所谓粘连布局其实就是当内容容器没有超出时，footer底部盒子是紧贴在底部的，当内容超出的时候，footer紧跟在内容容器之后，并不会超出容器，以下图能够解释其应用场景。
粘连布局图示
实现粘连布局目前我只学到了以下三种方式的实现，网上还有个
position:sticky实现方式，兼容性不太好，目前没去研究过，大家可自行搜索资料查看。
粘连布局方法一之怪异盒子模型解决方案
HTML部分
<div class="box">
<div class="content">
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
</div>
<footer class="footer"></footer>
</div>
CSS部分
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
.box{
height: 100%;
}
.content{
background-color: red;
min-height: 100%;
font-size: 30px;
padding-bottom: 80px;
/*怪异盒子模型主要代码*/
box-sizing: border-box;
}
.footer{
height: 80px;
background-color: #009ff2;
margin-top: -80px;
}
粘连布局方法二之calc方法
使用calc方法，我们可以把它当做一个函数，calc是calculate（计算）的缩写，它是css3提供的新功能，主要用来计算长度
HTML部分
<div class="box">
<div class="content">
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
</div>
<footer class="footer"></footer>
</div>
CSS部分
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
.box{
height: 100%;
}
.content{
background-color: red;
min-height: calc(100% - 80px);
font-size: 30px;
}
.footer{
height: 80px;
background-color: #009ff2;
}
通过calc计算的方式，用内容盒子的最小高度减去底部的高度，计算通常都比较消耗性能，所以不推荐使用这种方式
粘连布局方法三之min-height方法
HTML方式
<div class="box">
<div class="content">
<div class="contBox">
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
顶一下 <br>
</div>
</div>
<footer class="footer"></footer>
</div>
CSS部分
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
.outer{
height: 100%;
}
.content{
background-color: red;
min-height: 100%;
font-size: 30px;
}
.contBox{
/* 多了一个盒子控制内容区域的padding-bottom ，这样内容就不会显示在底部区域去了*/
padding-bottom: 80px;
}
.footer{
height: 80px;
background-color: #009ff2;
margin-top: -80px;
}
后记
在努力学习技术的路上越来越胖（棒），之前一直停留在会用的阶段，现在更多的是需要懂背后的原理，写的不好的，望路过的各位大佬不吝指教，多多关注。
