我想用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的一切嗎？

來源

2017-03-10 Lumo5

添加背景色，以你的div的樣式，例如background-color: #fff;

，否則這將是透明的，這就是爲什麼你看到它背後的其他元素的原因。

來源

2017-03-10 16:44:17 Johannes

我試過，但後來我失去了sky.css藍色背景的效果。「background-color：＃f7fbfc;」我想我必須添加到這個div呢？ – Lumo5

你沒有發佈太多的代碼，所以我不能告訴你... – Johannes

但是，當然你會放棄背後元素的背景顏色。您可以使用背景顏色來覆蓋它背後的內容，或者背景是透明的，這可以讓您看到DIV背後元素的內容。如果這個背景是你所缺少的，那麼就像你自己寫的那樣，在'styles'屬性中加入'background-color：＃f7fbfc;'。 – Johannes

我會嘗試使用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有一個背景，以確保所有的內容是隱藏的。

來源

2017-03-10 16:44:23 AdamMcquiff

使用vw和vh不起作用。如果我爲div添加背景，它確實覆蓋了一切，但sky.css主題已經有了一個背景。所以我想我還必須爲div添加一個呢？ – Lumo5

對不起，我的代碼稍微不正確，只是修改。（只是在您複製我的代碼段時） – AdamMcquiff

謝謝。我沒有複製它，我注意到你使用了兩次。在我的代碼中，我嘗試了vw和vh。 – Lumo5

我會推薦使用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這here。

希望這會有所幫助！ :)

來源

2017-03-11 09:10:41

您可以將「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>

來源

2017-03-11 09:15:56

我想用div覆蓋整個屏幕

回答

相關問題