在不使用表格的情況下將iframe填充到屏幕底部

我想要顯示一個標題，其中包含佔用屏幕其餘部分的iframe上方的任意內容。我設法得到這個工作使用下面的表格：在不使用表格的情況下將iframe填充到屏幕底部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style> 
html, body, iframe, table, tr, td { 
    margin: 0; padding: 0; 
} 
html, body, iframe, table, #content { 
    height: 100%; width: 100%; 
} 
table { 
    border-collapse: collapse; 
} 
iframe { 
    border: 0; 
} 
</style> 
</head> 
<body> 
    <table> 
    <tr><td> 
     <div id="header"> 
     <p>some arbitrary stuff in a header</p> 
     <p>this is sized dynamically</p> 
     <p>it's not a fixed size</p> 
     </div> 
    </td></tr> 
    <tr><td id="content"> 
     <iframe src="http://www.bing.com/search?q=stackoverflow" /> 
    </td></tr> 
    </table> 
</body> 
</html>

，在Firefox和Chrome的工作，但不是IE7（我不知道爲什麼）。如果不使用表，這是最接近我能得到：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style> 
html, body { 
    margin: 0; padding: 0; 
    height: 100%; 
} 
iframe { 
    margin: 0; padding: 0; 
    width: 100%; 
    border: 0; 
} 
</style> 
</head> 
<body> 
    <div id="header"> 
    <p>some arbitrary stuff in a header</p> 
    <p>this is sized dynamically</p> 
    <p>it's not a fixed size</p> 
    </div> 
    <iframe src="http://www.bing.com/search?q=stackoverflow" /> 
</body> 
</html>

這看起來在所有的瀏覽器相同，但在iframe太短。如果我將它的高度設置爲100％，它會隨着屏幕和2個滾動條的增大而增大（與表格版本中的IE7相同）。我希望iframe能夠佔用瀏覽器窗口中剩下的任何空間，但不會更多。我寧願不必訴諸於Javascript。

來源

2009-06-06 dmnd

This看起來像你所需要的。查看源代碼以獲取更多信息。

來源

2009-06-07 08:47:46 Javache

這是行不通的。將iframe放入內容中，最後在瀏覽器頂部放置一小段iframe。 – dmnd 2009-06-08 03:26:49

爲什麼不只是使用舊時尚，定期的框架呢？ iFrame的重點在於它不會超出正常元素的範圍。

來源

2009-11-13 19:21:54

我需要頂部框架來動態調整大小以適應其中的內容。 – dmnd 2009-12-03 02:07:35

嘗試使用下面的JavaScript函數

<script language="javascript"> 
function adjust_iframe(oFrame) 
{ 
    if(!oFrame) return; 

    var win_height; 
    var frm_height;  

    // Get page height Firefox/IE 
    if(window.innerHeight) win_height = window.innerHeight; 
else if(document.body.clientHeight) win_height = document.body.clientHeight; 

    // Dtermine new height 
    frm_height = win_height - oFrame.offsetTop - 15; // replace 15 accordingly 

    // Set iframe height 
    oFrame.style.height = frm_height + "px"; 
} 
</script>

請注意，你將不得不在某個時候（如onLoad）實現調用它，如：

<body onload="adjust_iframe(document.getElementById('myiframe'));">

來源

2009-11-26 10:09:37

我現在有類似的東西。但問題的關鍵在於不使用JavaScript。 – dmnd 2009-12-03 02:08:26

我不認爲CSS盒子模型具有可用垂直空間的概念。

來源

2009-12-05 00:59:45 Neil

這工作填滿空間：

iframe { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 800px; (Whatever the height of your content is) 
    border: 0; 
}

來源

2010-12-13 18:26:46

在不使用表格的情況下將iframe填充到屏幕底部

回答

相關問題