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

Question

在下面的代码中为什么需要 .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>

Answer 1

这是为您的页脚保留space。由于.page-wrap上的负边距导致页脚向上拉，所以.page-wrap的底部需要有一个空白"reserved" space，这样[=里面的内容=10=] 不会在 .site-footer.

下方结束

.page-wrap:after 就是这样做的，它在 .page-wrap.

的底部添加了一个空白 "reserved" space 供页脚填充

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

Sticky Footer: Why is :after needed?

css

sticky-footer