iframe 100％的高度導致垂直滾動條

我想佈局一個設計，在屏幕頂部有一個固定的高度標題，然後在下面的iframe佔用剩餘的空間。我想出瞭解決辦法如下：iframe 100％的高度導致垂直滾動條

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style> 
    </head> 
    <body> 
    <div style="height:70px;background-color:blue;"></div> 
    <div style="position:absolute;top:70px;bottom:0;left:0;right:0;"> 
     <iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe> 
    </div> 
    </body> 
</html>

從本質上講，我創建的標題下的絕對定位的div和漿紗它佔用的空間的其餘部分，然後把全尺寸的iframe在那裏。

我遇到的問題是，如果您完全粘貼代碼，如下所示，在每個瀏覽器中使用XHTML Strict，您將會看到一個垂直滾動條和幾個div下的空白像素。

做了一些實驗，我發現如果我完全刪除文檔類型，它會在safari/chrome中工作，但IE會變得更糟，設置iframe高度爲300px左右。如果我將doctype設置爲transitional，它將在safari/chrome中工作，但與IE8中的嚴格情況相同。如果我使用HTML5文檔類型，它在所有瀏覽器中都有嚴格的問題。

最後，如果我在任何這些情況下刪除iframe，一切都很好。

任何人有任何想法？

來源

2010-05-25 Keevon

添加CSS正文{overflow-y：hidden;}

刪除垂直滾動。如果iFrame內容超出頁面大小，iframe將獲得滾動條而不是頁面。

來源

2010-05-25 06:47:24 Daveo

謝謝，這個伎倆！出於好奇，任何想法爲什麼額外的內容顯示出來？從概念上講，似乎所有內容都適合在頁面中。 – Keevon 2010-05-25 07:38:24

IE的奇妙填充/保證金錯誤之一 - 我敢肯定... – 2010-05-25 08:10:06

太棒了。謝謝。你在我討厭的漫長搜索中給了這個難題的一部分，試圖讓這個工作。不幸的是，在IE 6和7（不知道IE 8）我仍然只能使用IE瀏覽器樣式：'height：expression（（document.body.offsetHeight - 25）+'px'）;'。但我對此很好。 Firefox和其他瀏覽器忽略這種風格。幸運的是我的標題欄是固定的大小。如果沒有，我不得不使用'document.body.offsetHeight - document.getElementById（'headerbar'）。offsetHeight'或其他類似的東西。 – ErikE 2010-11-16 19:46:42

iframe 100％的高度導致垂直滾動條

回答

相關問題