爲什麼高度：100％是包含塊的大小，但在IE中是窗口的高度？

我有這樣的事情：爲什麼高度：100％是包含塊的大小，但在IE中是窗口的高度？

<table style="height:100%"> 
<tr><td style="height:250px;"></td></tr> 
<tr><td style="height:100%;"><div style="height:100%;"></div></td></tr> 
</table>

在Firefox它工作得很好，該表是窗口的大小，並從第二從底部的剩餘空間的第二TR罷了，但在IE股利td具有窗口的高度，這會導致滾動條。

下面是代碼：http://jsbin.com/uruki4

來源

2011-05-25 Csabi

你就能更好地運用而不是表div的。下面的代碼工作在Safari 5，IE7 +和Chrome：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title></title> 
     <style type="text/css"> 
     * { margin:0; padding:0 } 
     #fixed, #fill { position:absolute; width:100% } 
     #fixed { top:0; height:250px; background:red } 
     #fill { top:250px; bottom:0 } 
     #fill iframe { position:absolute; bottom:0 } 
     </style> 
    </head> 
    <body> 
     <div id="fixed"></div> 
     <div id="fill"> 
      <iframe src="http://google.com" width="100%" height="100%" frameborder="0"></iframe> 
     </div> 
    </body> 
</html>

請務必包括文檔類型，因爲還有其它IE不會使用標準。其他瀏覽器默認是這樣做的。

來源

2011-05-25 13:35:28 Midas

它的工作，如果填充是一個div，但它不工作，如果填充是一個iframe ... – Csabi 2011-05-25 14:18:42

我改變了代碼。將'iframe'添加到'div'並添加CSS以消除幀上的間距問題。還要將文檔類型更改爲Transitional。 – Midas 2011-05-25 14:39:35

謝謝！男人，你是一個天才！ – Csabi 2011-05-25 19:31:55

爲什麼高度：100％是包含塊的大小，但在IE中是窗口的高度？

回答

相關問題