一般来说，页面中的body是由页面内容撑开的。但有时候我们会有这样奇怪的需求，当页面内容不满一屏时，却要求有一个撑满一屏的背景色。
通常的解决方案是用最小高度解决，然而如果直接子元素有下margin，就会在部分手机上触发BFC，解决这类问题我一般会在他的父元素上直接overflow:hidden，但是此时此刻，这种方法行不通，除非你能确定你的页面永远不会超出一屏。
其实鱼与熊掌是可以兼得的，换一种思路，我们伟大的伪元素登场啦。还记得那一天，我问我们老大，你写代码的时候为什么老喜欢用伪元素，只见他无奈的瞥了我一眼，伪元素可以在不改变HTML结构的情况下实现某些css效果，这对项目后期维护还是很有帮助滴。
好吧，不说废话啦。
通常我们写代码是这样的
<html>
<head></head>
<body>
我是内容
</body>
</html>
只需改成这样
<html>
<head></head>
<body>
<div class="page-container">
我是内容
</div>
</body>
</html>
.page-container::beforer{
content:" ";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:#ccc;/* 颜色自定义 */
z-index:-100;/* 突然想到个游戏，是男人就下100层。。。 */
}
网友评论