从此页上的代码中：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伪元素，但不了解这里发生了什么。
在编辑Codepen演示并.page-wrap:after从设置其高度或display: block属性的行中删除时签出。然后点击“添加内容”。由于.page-wrap底边有负数，因此只能将页脚向下推142像素，并导致文本溢出。因此，简而言之，它填补了负的底边...是的，您可以通过使用具有相对定位，z-indexing等的简单div来做同样的事情。实际测试了它并在之后添加了一个块元素.page-wrap，就像这样：
.fix {
position: relative;
display: block;
z-index: -2;
bottom: 0;
height: 142px;
width: 100%;
}
但是，尽管有HTML5和CSS3，为什么不使用它呢。嘿，您不必创建新元素，只需从CSS设置它即可。这真棒！
:after前缀的其他越来越流行的用法（我在WP主题中看到了一些用法）包括使用它替代clearfix div。请查看此文章以进一步阅读：http : //css-tricks.com/snippets/css/clear-fix/
您可能想知道为什么他首先设置负底边距；答：因为他希望.page-wrap {min-height: 100% }页面加载时不要将页脚推到折叠之下，所以如果内容没有进一步扩展的话。百分比高度将消除任何这些技巧的需要，例如，页脚高度为10％，分页换行最小高度为90％，但缺点是您无法控制确切的页脚高度...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句