我想用div覆盖整个屏幕

Question

我想用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覆盖所有内容？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<div id="full_page"></div>

＆＃13;

＆＃13;

＆＃13;

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

希望这有帮助！ ：）

Answer 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具有背景，以确保隐藏所有内容。

Answer 3

您可以将“position：absolute”设置为封面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>

Answer 4

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

否则它将是透明的，这就是你看到其背后的其他元素的原因。