sticky footer布局

实例

.clearfix
  display: inline-block
  &:after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

  .detail
    position: fixed
    z-index: 100
    top: 0
    left: 0
    width: 100%
    height: 100%
    overflow: auto
    background: rgba(7, 17, 27, 0.8)
    .detail-wrapper
      width: 100%
      min-height: 100%
      .detail-main
        margin-top: 64px
        padding-bottom: 64px
    .detail-close
      position: relative
      width: 32px
      height: 32px
      margin: -64px auto 0 auto
      clear: both
      font-size: 32px

套路

---

• 一个展示内容content的容器wrapper
• 一个展示footer的容器
• wrapper设置最小高度，保证可以展示全部内容
• 设置content下内边距，给footer内容预留位置
• 设置footer的外边距，显示在footer预留的位置上
• 外层清除浮动

sticky footer的三种解决方案

1. 为内容区域添加最小的高度

这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%)，然后减去底部footer的高度，从而求得内容区域的最小高度。

.content {
    min-height: calc(100vh - footer的高度);
    box-sizing: border-box;
}

2. 使用flex布局

这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度；content的flex设为1，这样它会充满除去footer的其他部分。

body {
   display: flex;
   flex-flow: column nowrap;
   min-height: 100vh;
}
.content {
    flex: 1;
}
.footer {
    flex: 0;
}

3. 在content的外面可以添加一个wrapper

    

    

    
　
　



html, body, .wrapper {
    height: 100%;
}
body > .wrapper {
    height: auto; min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必须使用和footer相同的高度，此处用padding，是为了防止未指定盒子类型时用内边距影响了盒子的高度*/
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的负值，此处用 */
    height: 150px;
    clear:both;
}
.clearfix {
     display: inline-block;
}
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}