实现stick footer布局

实现stick footer布局

• 什么是stick footer
• 实现方式
• 总结

---

stick footer布局简介

stitck footer布局现在在手机端比较常见，通常是固定一个关闭按钮在一个界面的页脚，当页面内容不撑满页面的时候，关闭按钮还是会在页脚。当页面内容超过页面。这个时候，关闭按钮也会随之向下移动。

实现方式

设计

container表示容器，content表示内容区，在内容区内根据自己的需要可以又分很多div，close就是定义在页脚div通常可能是关闭按钮或者图标

<div class="container">
<div class="content">
<div class="content-main"></div>
</div>
<div class="close">关闭</div>
</div>


container与content的css书写

  html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .container {
        height: 100%;
      }
      .content {
        min-height: 100%;
        border:1px solid red;
      }
      .content-main{
        padding-bottom: 32px;
        margin-top:32px ;
        border: 1px solid black;
      }
      .close{
        height: 32px;
      }

如果content-main没有内容的时候回出现下图的效果：


通过以上的样式书写，可以发现，内容区域的高度始终是100%高度，而关不按钮失踪是在内容以上，所以下面我们就需要把页脚搬上来

close样式书写

 .close{
        height: 32px;
        position: relative;
        margin: -32px auto;//这里会在内容不足的时候，把页脚从页面外拉出来
        background: rgb(7,17,27);
        clear: both;
      }

部分效果展示如下：

总结

在写文章之前并没有想过要写总结，但是在写文章的过程中我好想想通了一点点什么，为什么内容会设置会设置一个padding-bottom为32px了，好想并没有体现出什么。但是如果你的内容的边框刚好充满整个页面的时候，我们的页脚就刚好占据下内边距的位置，让我们的整个页面刚好充满，这就是设置这个值得原因！