Question

从此页面上的代码：http://css-tricks.com/snippets/css/sticky-footer/

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}

任何人都可以解释.page-wrap:after块正在做什么吗？我理解after伪元素，但我不明白这里发生了什么。

Answer 1

在编辑Codepen演示时检查并从设置其高度或.page-wrap:after属性的行中删除display: block。然后单击“添加内容”。因为.page-wrap具有负边距底部，所以它只会将页脚向下推下142像素并让文本溢出。 所以简而言之，它填补了负底差 ...是的，您可以通过使用具有相对定位，z-indexing等的简单div来做同样的事情。实际测试它＆amp;在.page-wrap之后添加一个块元素，就像这样也可以：

.fix {
  position: relative;
  display: block;
  z-index: -2;
  bottom: 0;
  height: 142px;
  width: 100%;
}

但HTML5＆amp; CSS3在那里，为什么不使用它...嘿，你不必创建一个新的元素，只需从CSS设置它。真是太棒了！

其他更多＆amp;更常用的:after前缀（我在WP主题中看到一些）包括使用它作为clearfix div的替代品。查看此文章以进一步阅读：http://css-tricks.com/snippets/css/clear-fix/

你可能想知道为什么他首先设定负底线;答：因为他希望.page-wrap {min-height: 100% }不要在页面加载时将页脚推到折叠下，如果内容不再延伸。百分比高度将消除任何这些技巧的需要，例如页脚高度10％，页面包裹最小高度90％，但缺点是你无法控制确切的页脚高度......

为什么要将块级别添加到伪元素？

1 个答案: