实现粘连布局的三种方式

所谓粘连布局其实就是当内容容器没有超出时，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;
}

后记

在努力学习技术的路上越来越胖（棒），之前一直停留在会用的阶段，现在更多的是需要懂背后的原理，写的不好的，望路过的各位大佬不吝指教，多多关注。