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

背景颜色仅用于检查div的可见性。根据您的选择更改它。很高兴有一些opacity用于叠加层以获得更好的外观和感觉效果。

Answer 2

尝试设置：

position: absolute;

Answer 3

像这样......

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

div高度和宽度100％遵循页面屏幕大小而不是内部的元素大小

3 个答案: