確定嵌入式div的大小

我正在嘗試爲我的網站模擬一種彈出式幫助對話框。當用戶單擊幫助時，蒙版將覆蓋整個頁面，並使用一個深色的，部分透明的蒙版，並且可以看到具有更高z順序的helppage div。 helppage div是80％寬和90％高的絕對位置，分別位於左側10％和前5％，都相對於身體。到目前爲止，一切都很棒。 helppage div的內容是： - 具有緊密錨點20px高浮動權限的全寬頭。 - 一個iframe的div來佔據含helppage div的休息： - 一個iframe中的問題，以顯示HTML文檔確定嵌入式div的大小

問題：我期望iframe的div的高度爲20像素少比helppage div，但由於一些奇怪的原因，它比helppage div大3px。因此，iframe的底部是不可見的。

的HTML：

<div id="helpbox"> 
    <div id="helppage" class="window" style="display: block; position: absolute;"> 
    <div class="hd-header"> 
    <a class="close" onclick="hidehelp()"></a> 
    </div> 
    <div class="iframe-div"> 
    <iframe id="HelpPageFrame" src="/help-system.html"></iframe> 
    </div> 
</div>

的CSS：

#helpbox .window { 
    position:absolute; 
    display:none; 
    z-index:9999; 
} 

#helpbox #helppage { 
    background: white; 
    width:80%; 
    left: 10%; 
    top: 5%; 
    height:90%; 
    padding: 0px; 
    overflow: hidden; 
} 

#helppage iframe { 
    border: none; 
    width: 100%; 
    height: 100%; 
} 

#helppage .iframe-div { 
    width: 100%; 
    position: relative; 
    display: inline-block; 
} 

#helpbox .hd-header { 
    height: 20px; 
    font-weight: bold; 
    overflow: hidden; 
    display: inline-block; 
    width: 100%; 
} 
#helpbox .close { 
    width:20px; 
    height:20px; 
    display:block; 
    float:right; 
    clear:right; 
    background:transparent url(images/close_icon_double.png) 0 0 no-repeat; 
}

任何建議，將不勝感激

編輯作爲Mixel公司指出，一個重要的細節滑落，當我特里結構以簡化已被糾正的情況。

來源

2011-08-25 TheRoadrunner

當您提出問題時，請準確無誤。

'#helppage .window'選擇符中有空格。它什麼都不選。因爲'#helppage'並非絕對定位。
沒有'#helpbox'元素。

編輯雖然你還是有點innaccurate（你忘了關 'DIV'），有答案。您需要用'.iframe-div'填充'#helppage'的其餘部分。如果將'.iframe-div'高度設置爲100％，則會將父元素的高度設置爲100％ - '#helppage'。爲了解決這個問題，你需要絕對定位'.iframe-div'：

#helppage .iframe-div { 
    position: absolute; 
    top: 20px; 
    bottom: 0; 
    right: 0; 
    left: 0; 
}

或者用javascript設置高度。看看這個：Make DIV fill remainder of page vertically?

這是相當普遍的問題。

來源

2011-08-25 07:13:02 mixel

謝謝你指出，我不是很準確。我試圖簡化一些事情，猜測我失敗了;-)這也解釋了問題1，它應該是#helpbox .window – TheRoadrunner

非常感謝你的努力，它像一個魅力。對於不準確的抱歉，很高興您決定幫助我:-) – TheRoadrunner

確定嵌入式div的大小

回答

相關問題