DIV高度和宽度100％如下页面的屏幕尺寸不元件尺寸内

我有DIV高度和宽度100％如下页面的屏幕尺寸不元件尺寸内

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

高度和外层div被设置为100％的宽度。

这里发生的是，100％指的是内部元素（div内）的大小。

我有一个动态变化的内部div的元素，我想成为我的外部div得到页面大小的屏幕。

请注意，这些div（外部和内部）是一个弹出式元素。所以我想覆盖弹出窗口背后的所有其他元素，这就是为什么我需要100％的页面。

这是我的CSS的外层div

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

来源

2012-08-06 Jam Ville

如何使用'javascript.window.open（）'打开弹出窗口，如果是，则表示rep。 – Prateek 2012-08-06 06:17:36

你已经在你的风格中声明了两次高度。使用一个。你确定你需要覆盖的背景图片吗？我认为一个不透明的背景颜色可以完成这项工作。由于全屏尺寸的图像很重，可能会损害性能。 – Narendra 2012-08-06 06:18:10

@pKs，我是通过onclick ='overlay（）'做到的。我的CSS实际上具有可见性：隐藏; 。我会更新我的问题的CSS给你看 – 2012-08-06 06:19:49

的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覆盖层有更好的外观和感觉效果。

来源

2012-08-06 06:14:26 Narendra

我已经设置不透明度为PNG背景。 – 2012-08-06 06:17:12

你确定你需要背景图片吗？在类声明中还有重复的高度和宽度。 – Narendra 2012-08-06 06:19:18

您认为哪些宽度和高度声明是正确的？ – 2012-08-06 06:24:50

尝试设置：

position: absolute;

来源

2012-08-06 06:07:53

请看看我更新的问题，我已经这样做了，但它不起作用 – 2012-08-06 06:13:53

为什么你加了这个：height：auto！important;宽度：自动！重要;宽度和高度您以前已经设置。 – 2012-08-06 06:16:16

检查设置正确的背景图像路径？ – 2012-08-06 06:21:31

事情是这样的......

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

来源

2012-08-06 06:08:43

请看看我的更新问题，我已经做到了，但它不工作 – 2012-08-06 06:13:33

DIV高度和宽度100％如下页面的屏幕尺寸不元件尺寸内

回答

相关问题