修復iframe的高度與包含div完全相同

我有一個簡單的4面板網頁設置主要使用div和css。面板div是頁眉，頁腳，菜單和內容。菜單和內容應該是具有相同高度的平行列。修復iframe的高度與包含div完全相同

一切工作正常，直到我把一個iframe內的內容div。內容div然後變得比菜單div更高，即使我將它們設置爲相同的高度。我知道iframe是原因，因爲當我取出iframe時不會發生這種情況，但是它的內容div（而不是iframe）實際上太高了。

我該如何解決這個問題？有人提出了一些類似的問題，但提出的解決方案對我來說並不適用，除非我做錯了什麼。這是我的完整代碼：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<style> 
    body { 
     margin: 0; 
     padding: 0; 
    } 
    #header { 
     background-color: #7D110C; 
     height:100px; 
    } 
    #menu { 
     float:left; 
     width:300px; 
     background-color: lightGrey; 
     min-height:500px; /* for modern browsers */ 
     height:auto !important; /* for modern browsers */ 
     height:500px; /* for IE5.x and IE6 */ 
    } 
    #content { 
     margin-left:300px; 
     background-color: white; 
     min-height:500px; /* for modern browsers */ 
     height:auto !important; /* for modern browsers */ 
     height:500px; /* for IE5.x and IE6 */ 
    } 
    #content iframe{ 
     width:100%; 
     border:none; 
     margin: 0; 
     padding: 0; 
     background-color: pink; 
     min-height:500px; /* for modern browsers */ 
     height:auto !important; /* for modern browsers */ 
     height:500px; /* for IE5.x and IE6 */ 
    } 
    #footer { 
     clear:both; 
     background-color: #7D110C; 
     height:100px; 
    } 
</style> 
</head> 

<body> 
    <div id="header"></div> 
    <div id="menu"></div> 
    <div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div> 
    <div id="footer"></div> 
</body> 

<script type="text/javascript"> 
    console.log($('#content').css('height')); 
    console.log($('#content_iframe').css('height')); 
</script> 

</html>

來源

2013-04-16 baixiwei

height:auto !important;覆蓋height:500px;在#content和#content iframe。如果你在兩個CSS類中都沒有使用height:auto !important;，那麼它工作正常。 jsFiddle

好的這裏是真正的修復，只是保持原樣，並將display: block添加到#content iframe。這解決了它。 iframe是內聯框架，因此是額外的空白區域。 Updated jsFiddle

來源

2013-04-16 01:42:21

但是，爲什麼附加「高度自動！重要的「#content和#content_iframe都不給他們兩個相同的高度？ – baixiwei

爲什麼在首位添加'height auto！important'！ –

說實話，我只是從我在某處找到的模板複製格式，以改變它，但如果我理解正確的話，功能是允許菜單和內容div填充可用空間，如果可能的話，使它們高於500px，但不會更短 – baixiwei

如果你設置了一個固定的height:500px;並且iframe比這個更高，你會在側面得到一個滾動條。

如果您想始終保持一個固定的高度，請將height: auto !important和min-height: 500px刪除，只保留height:500px。

height-auto：瀏覽器計算高度。這是默認設置。
min-height：定義的最小高度

下面將menu和content在任何時候都有相同的高度。

HTML

<div id="wrapper"> 
    <div id="menu"></div> 
    <div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div> 
</div>

CSS（只是將其添加到已經存在的）

#wrapper { display: table; } 
#menu { display: table-cell; } /* Remove the float */ 
#content { display: table-cell; } /* Remove the float */

注意，這將不會在IE7和下面的工作，雖然。要麼你必須使用固定高度的menu和content或javascript。

來源

2013-04-16 01:44:31

好吧，這似乎確實使菜單和內容div的高度相同，但是 - 它們不是我設置的高度。換句話說，不僅僅是內容div比我設置的更高，現在菜單和內容div都是。我怎樣才能讓他們服從我的設定高度？ – baixiwei

刪除'height：auto;'。你爲什麼在那裏？另外，如果你想要一個固定的'500px'高度，請移除'min-height：500px;'。只留下**這個：'height：500px;' –

你必須先決定你想要什麼。在另一個評論中，你說你只想**最低身高**。在這裏你說你想要一個**固定的高度**（這是你將要設置的高度）。 –

對於現代的瀏覽器，你可以試試這個：

從#content iframe添加position:relative到#content

刪除寬度，高度，最小heigth並添加此相反：

position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0;

不知道該怎麼儘管如此，IE 5和6也是如此。

來源

2013-04-16 01:44:54 artem

修復iframe的高度與包含div完全相同

回答

相關問題