移动端不满一屏时实现一屏的背景

作者 likaiqiang 日期 2017-02-14
移动端不满一屏时实现一屏的背景

一般来说,页面中的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层。。。 */
}