CSS Sticky footer布局

CSS Sticky footer

我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。

实现方式一：

html

  <div class="mask">
    <!-- 正式开始 -->
    <div class="content">
      <p>Percy’s visual testing platform makes it easy to test your UI across browsers and screens on every pull request.</p>
      <p>Percy’s visual testing platform makes it easy to test your UI across browsers and screens on every pull request.</p>
      
    </div>
    <div class="footer">X</div>
  </div>
</body>
</html>

css

  /*基本配置，不是关键部分*/
  *{
    margin: 0;
    padding: 0;
    color:#fff
  }
  p{color:#fff}

  /*开始表演 最重要的还是100%*/
  .mask{
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 1;
    overflow: auto;
    background: rgba(7, 17, 27, 0.8);
  }
  .content{
    min-height: 100%;
    margin-bottom:-64px;
  }
  .content:after{
    content: '';
    display: block;
    clear: both;
  }
  .footer{
    text-align: center;
    
  }
  .footer, .content:after{
    height:64px;
  }

解释css：两个元素a、b呈现上下布局，a在上，b在下。a元素的最小高度为100%，且用margin-bottom:-64px;让b元素网上走64px，且a元素后面伪类增加64px的高度和清除浮动，1是为了防止高度塌陷，2是防止b元素覆盖a元素，最后的b元素也设置成相同高度，为了保持a内容少时在一个页面。

注意:content元素的height、footer元素的高度以及footer元素的margin-top值必须要保持一致。

效果图：

方法二：

html

  <!-- 图片可以不用管他 -->
  <div class="mask">
    <div class="content">
      <p>Percy’s visual testing platform makes it easy to test your UI across browsers and screens on every pull request.</p>
      <p>Percy’s visual testing platform makes it easy to test your UI across browsers and screens on every pull request.</p>
      
    </div>
    <div class="footer">X</div>

css

  *{
    margin: 0;
    padding: 0;
    color:#fff
  }
  p{color:#fff}

.mask {
    width:100%;
    height:100%;
    background: rgba(7, 17, 27, 0.8);
    min-height: 100vh;
    position: fixed;
    top:0;
    left:0;
    z-index: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    /* justify-content:center; */
    text-align: center;
}
.content {
    flex: 1;
}
.footer {
    flex: 0;
}

效果图

这种布局方式结构简单，代码量少，也是较为推荐的布局方式。