我想用 div 覆盖整个屏幕答案

【问题标题】：I want to cover the whole screen with a div我想用 div 覆盖整个屏幕
【发布时间】：2017-03-10 16:39:32
【问题描述】：

我想用 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;">

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

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

如何用 div 覆盖所有内容？

【问题讨论】：

标签： javascript html css reveal.js

【解决方案1】：

我建议将position: absolute 与width: 100vw 和height: 100vh 结合使用。

#full_page {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: red;
}

&lt;div id="full_page"&gt;&lt;/div&gt;

我还创建了一个展示此 here 的 JSFiddle。

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

我会尝试使用vw 和vh，分别是视口宽度和视口高度。这将确保覆盖整个视口。

您可以在this article 中阅读更多相关信息。

<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;>

我还会确保您的 lessonContents div 有背景以确保所有内容都被隐藏。

【讨论】：

使用 vw 和 vh 不起作用。如果我向 div 添加背景，它会覆盖所有内容，但 sky.css 主题已经有背景。所以我想我也必须为 div 添加一个？
对不起，我的代码有点不正确，刚刚修改。（以防你复制了我的 sn-p）
谢谢。我没有复制它，我注意到你使用了两次 vh。在我的代码中，我尝试了 vw 和 vh。
啊，本来是position: absolute

【解决方案3】：

您可以将“位置：绝对”设置为您的封面 div。

.outer {
  position: relative;
}
.cover {
  position:absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: blue;
}

<div class="outer">
  <div class="cover"></div>
  <p>Back to course</p>
</div>

【讨论】：

【解决方案4】：

为 div 的样式添加背景颜色，例如 background-color: #fff;

否则它会是透明的，这就是为什么你看到它后面的其他元素的原因。

【讨论】：

我试过这个，但后来我失去了 sky.css 蓝色背景的效果。 “背景颜色：#f7fbfc；”我想我也必须将它添加到 div 中？
但是你当然会失去其背后元素的背景颜色。你要么有一个背景颜色覆盖它后面的东西，要么背景是透明的，这样你就可以看到 DIV 后面元素的内容。如果您缺少该背景，只需将background-color: #f7fbfc; 添加到您的styles 属性中，就像您自己编写的那样。
div 是透明的似乎很奇怪，因为它充满了内容。无论如何，您对背景颜色是正确的。我所做的是因为 Reveal.js 中的每张幻灯片都是一个部分。