CSS包装器内容的全高，而不是窗口的全高

Question

我正在运行一个css背景，其中包含一些闪烁的星星的图像。问题是，css使用绝对定位来用这些星星填充页面，这只填充了当前浏览器窗口的大小。

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;

当内容超过初始窗口大小时，我需要调整它以填充整个页面。有没有办法确保背景始终覆盖整个页面，而不仅仅是最初的浏览器窗口大小？

在此处打开代码。。。

https://codepen.io/lowercase01/pen/PoKdYKa

Answer 1

只需使用position: fixed而不是absolute，如下所示：

.stars, .twinkling {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}