如何让背景色在任何设备宽高都能填充整个屏幕

“利用到初中物理运动知识”

直接上代码：

.app::before {
    content: " ";
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ecf1f2;
    z-index: -100;
  }
1
2
3
4
5
6
7
8
9
10

以上代码是笔者在移动端使用的，不一定是before也可以是after，position不一定是fixed，也可以是absolute，具体看使用者的情况，以上代码实现效果就是永远保证屏幕被该背景色填满，在滚动时候，它永远是静止的。如果position不用fixed，用absolute灵活性也更高，就不一定是铺满整个屏幕，因为这个就参考着你对谁设置了relative，宽高也可以计算，也可以随着父容器宽高变化。

再提供可能用到的写法：

.app::before {
    content: " ";
    position: fixed;
    left: 0;
    top: 0;
    bottom:0;
    right:0;
    background-color: #ecf1f2;
    z-index: -100;
  }
1
2
3
4
5
6
7
8
9
10

总结：要看懂这个那肯定必要的基础有：
1、position的使用，知道fixed和absolute的区别，当不设置relative的时候，就要参考谁进行定位的。
2、单位问题，比如：vw、vh、%、rem等单位。

大致实现原理：
1、加一个你想填充这块屏幕的伪元素(最方便)，或者你自个给div加样式。
2、然后设置定位，根据需求选绝对定位还是固定定位。
3、如何填充满这块区域，或者可视区的区域。

然后当用户滑动时候，这片区域就会永远固定在哪里。只需要计算一次就兼容了所有设备问题了。