css - div の高さと幅 100% は、内部の要素のサイズではなく、ページの画面サイズに従います

Question

私は持っている

<div id=overlay>
    <div></div>
</div>

外側の div の高さと幅は 100% に設定されます。

ここで何が起こるかというと、100% は内部 (div 内) の要素のサイズを指します。

内部の div に動的に変化する要素があり、外部の div をページ画面のサイズにしたかったのです。

これらの div (外側と内側) はポップアップ要素であることに注意してください。そのため、ポップアップの背後にある他のすべての要素をカバーしたかったので、背後にあるページの 100% が必要です。

これは、外側の div の私の CSS です

#overlay {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%; 
 min-height: 100%;
 min-width: 100%;      
 height: auto !important;
 width: auto !important;       
 text-align:center;
 z-index: 1000; 
 background-image:url(template/popup-bg.png); 
} 

私のjs

function overlay(e) 
{
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

Answer 1

HTMLをこれに変更するだけです

<div id='overlay' class='hideOverlay'>
    <div></div>
</div>

クリックすると、クラスが変更されます。jsをこれに変更します

function overlay(e) 
{
    $('#overlay').attr('class', 'showOverlay');
}

次のスタイルを確認してください

.showOverlay
{
    background-color: red;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.2;
    position: fixed;        
    width: 100%;
    z-index: 1001;
}

.hideOverlay
{
    display:none;
}

background-color は、div の可視性を確認するためだけに指定されています。選択に応じて変更してください。opacityオーバーレイのルック アンド フィール効果を向上させるためにいくつかあると便利です。

Answer 2

設定してみてください：

position: absolute;

Answer 3

このようなもの...

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;