Javascript 我想用div覆盖整个屏幕

我想用div覆盖整个屏幕

使用iframe可以覆盖所有内容：

<iframe id="iframe" src="source.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999;">

但我想用一个div来做这个：

<div id="lessonContents" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999;">

我正在将Reveal.js与sky.css主题一起使用。出于某种原因，div之外的元素是可见的，即使sky.css主题有蓝色背景

例如，这是一张应该被div覆盖的链接图片。正如您所看到的，由于sky.css主题，背景是蓝色的：

---

如何使用div覆盖所有内容？

在div的样式中添加背景色，例如

背景色：35;fff

否则它将是透明的，这就是为什么您会看到它后面的其他元素。
我会尝试使用
vw
和
vh
，这分别是视口宽度和视口高度。这将确保整个视口都被覆盖

您可以在中阅读更多关于这方面的信息

我建议结合使用
宽度：100vw
和
高度：100vh


#整页{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100vw；
高度：100vh；
保证金：0；
填充：0；
背景：红色；
}
您可以将“位置：绝对”设置为封面div


.outer{
位置：相对位置；
}
.掩护{
位置：绝对位置；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
背景颜色：蓝色；
}

回到正轨

我尝试了这个，但后来失去了sky.css蓝色背景的效果。“背景色：#f7fbfc；”我想我也必须将其添加到div中？但当然，您会丢失其后面元素的背景色。您可以使用背景色覆盖其背后的内容，也可以使用透明的背景色查看DIV背后元素的内容。如果缺少的只是背景色，只需添加
background color:#f7fbfc到你的
样式
属性，就像你自己写的那样。div是透明的，因为它充满了内容，这看起来很奇怪。无论如何，关于背景色，你是对的。我所做的是第{z-index:999；}节，因为Reveal.js中的每张幻灯片都是一个节。使用vw和vh不起作用。如果我在div中添加背景，它确实会覆盖所有内容，但是sky.css主题已经有了背景。所以我想我也必须为div添加一个吗？对不起，我的代码有点不正确，刚刚修改过。（以防万一你抄了我的片段）谢谢。我没有复制它，我注意到你用了vh两次。在我的代码中，我尝试了大众和vh。啊，它应该是
position:absolute
<div id="lessonContents" style="position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:100vw; height:100vh; border:none; margin:0; padding:0; overflow:hidden; z-index:999;>