粘性页脚：为什么需要 :after？答案

【问题标题】：Sticky Footer: Why is :after needed?粘性页脚：为什么需要 :after？
【发布时间】：2015-01-30 12:39:52
【问题描述】：

在下面的代码中为什么需要.page-wrap:after？

理论上，如果没有这个，粘性页脚不应该工作吗？为什么没有？

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

【问题讨论】：

标签： css sticky-footer

【解决方案1】：

这是为您的页脚预留空间。由于.page-wrap 上的负边距导致页脚向上拉，因此.page-wrap 底部需要有一个空白的“保留”空间，以便.page-wrap 内部的内容不会在@ 下面结束987654324@.

.page-wrap:after 就是这样做的，它在.page-wrap 的底部添加一个空白的“保留”空间供页脚填充。

【讨论】：