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％如下頁面的屏幕尺寸不元件尺寸內

回答

相關問題