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

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

在开发移动端H5活动页时，经常会遇到各种各样的情况，这次是想实现一个页面内容不够一屏，但背景想要撑满整个屏幕 的功能。

功能分析：

一般来说，元素都是由元素内容撑开，但是开发过程中难免会遇到内容不满一屏，但是背景需要撑开一屏的情况（例如：列表页就一行数据，但是这页有个背景，总不能背景在这一条数据背后戛然而止，再往下就什么都没有了），总结前人经验，一般有以下几种解决方法：

1. 设置min-height

     给父元素设置一个min-height: 100%;

不足：

1. 照理说这样设置会自动撑开至屏幕大小，但假如内容复杂点，设置了别的样式，会导致这样并不能起到作用，而是需要给min-height设置一个具体的值（如5rem）；
2. 另外如果直接子元素有下margin，就会在部分手机上触发BFC。

2. 单独固定一个空div，设置背景色，z-index：-100；

单独创建一个dom元素作为整体内容背景，设置它的宽高都是 100%，然后设置一个背景色，并且将z-index设置为-100，避免影响其他元素。 如：

<div class="content">你的内容</div>

<div class="background"></div>

.background{

      width:100%;

      height:100%;

      position:fixed;

      top:0;

      background:#f00;

     z-index:-100;

 }

不足：

1. 如果背景是纯色，或者上边有背景图，底部基本纯色，这种方法没啥问题，可如果背景不是纯色，这样设置会很明显在页面中看到断层，视觉效果很差；
2. 会创建冗余dom结构。

3. 使用伪元素 （好用！！！）

<div class="content">
    内容内容。。。。。
</div>

.content {
    content:" ";
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:#0ff;
    z-index:-100;
}

使用伪元素，可以避免创建多余的dom结构，但是如果背景不是纯色的话，这种方法还是会有断层出现。