绝对 divs 背景颜色未覆盖整个屏幕

Question

我试图只使用div为我的VueJs应用程序设置一个加载屏幕，但问题是我无法使div(loadingScreen(背景色覆盖整个屏幕。相反，它覆盖了装载机的高度。我已经尝试过在正文中添加边距，但这并没有解决问题。

#ctrl {
position: absolute;
display: block;
text-align: center;
left: 50%;
top: 40%;
}
#loadingScreen {
background-color: rgb(0, 0, 0);
display: block;
z-index: 1;
position: absolute;
}
#loader {
position: relative;
left: -50%;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: inherit;
}
#playPause{
display:none;
}

<div id="ctrl">
<div id="playPause">
<img src="../public/pauseButton.png" />
<img src="../public/playButton.png" />
</div>
<div id="loadingScreen">
<div id="loader"></div>
</div>
</div>

Answer 1

由于加载屏幕是ctrl元素的子元素，因此预期会出现感知行为。这不是问题，我只是将加载屏幕的位置更改为固定，并操纵其位置属性，请参阅下文。然后我把装载机居中。

#ctrl {
position: absolute;
display: block;
text-align: center;
left: 50%;
top: 40%;
}
#loadingScreen {
background-color: rgb(0, 0, 0);
display: block;
z-index: 1;
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
}
#loader {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left:auto;
margin-right:auto;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 5;
}
#playPause{
display:none;
}

<div id="ctrl">
<div id="playPause">
content
</div>
<div id="loadingScreen">
<div id="loader"></div>
</div>
</div>