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

我正在將Reveal.js與sky.css主題一起使用。 由於某些原因，即使sky.css主題具有藍色背景，div外部的元素仍然可見。

例如，這是div應該覆蓋的鏈接的圖片。 如您所見，由於sky.css主題，背景為藍色：

如何覆蓋div的所有內容？

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

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

我還創建了一個JSFiddle，在此展示了這一點 。

希望這可以幫助！ :)

Answer 2

我會嘗試使用vw和vh ，分別是視口寬度和視口高度。 這樣可以確保完全覆蓋視口。

您可以在本文中了解有關此內容的更多信息。

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

否則它將是透明的，這就是您看到其背后其他元素的原因。