如何让CSS wrapper匹配内容而非窗口高度，实现全页面背景覆盖

你当前的absolute定位逻辑是相对于父元素的高度计算的，当页面内容高度超出初始视口高度时，父元素高度没有同步被内容撑开，就会出现背景覆盖不全的问题，可选择以下两种方案适配：

• 方案1：使用fixed定位（背景固定不随滚动位移，推荐星空场景使用）
  直接修改星空元素的CSS配置即可，新增z-index: -1避免背景遮挡页面内容：

position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: block;
z-index: -1;

fixed定位是相对于浏览器视口进行计算，无论页面内容多长，都能始终覆盖整个可视区域，滚动时背景保持固定，更符合星空背景的展示效果。

• 方案2：保留absolute定位（背景随页面滚动）
  需要先给html、body以及星空元素的所有上级父元素设置最小高度和相对定位，保证父元素高度可以随内容自适应撑开：
  首先添加全局基础样式：

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

再修改星空元素的CSS，新增z-index配置即可：

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;
z-index: -1;

注意：如果星空元素嵌套在其他容器内，需要给所有上级容器都加上min-height: 100%和position: relative配置，否则定位逻辑会失效。

内容的提问来源于stack exchange，提问作者lowercase