divで全画面をカバーしたい

Question

divで画面全体を覆いたい。インラインフレームを使用して

はすべてカバー：

<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要素でこれをしたい：私はsky.cssをテーマにReveal.jsを使用しています

<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テーマが青い背景を持っていても、divの外部の要素が表示されます。

たとえば、これはdivによって覆われるべきリンクの画像です。あなたが見ることができるように背景がsky.cssテーマの結果として青です：

私はdiv要素ですべてをカバーできますか？

Answer 1

は例background-color: #fff;

のためにそうしないと、それはあなたがその背後にある他の要素を参照してください理由である、透明になり、あなたのdivのスタイルに背景色を追加します。

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

width: 100vwとheight: 100vhと組み合わせてposition: absoluteを使用することをおすすめします。

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

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

私はまた、このhereを展示JSFiddleを作成しました。

希望すると便利です。 :)

Answer 4

"position：absolute"をカバー区域に設定できます。

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