粘性页脚：为什么：需要后？

Question

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

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

为您的页脚预留空间。由于.page-wrap上的负边距，页脚被向上拉，因此需要一个空白＆＃34;保留＆＃34; .page-wrap底部的空格，以便.page-wrap内的内容不会在.site-footer下方结束。

.page-wrap:after就是这样，它会添加一个空白＆＃34;保留＆＃34;页脚的空间填充在.page-wrap的底部。