修复iframe的高度与包含div的高度完全相同

Question

我有一个简单的4面板网页，主要使用div和CSS进行设置。 面板div是页眉，页脚，菜单和内容。 菜单和内容应该是具有相同高度的平行列。

一切正常，直到我在内容div中放入iframe。 然后，即使将它们设置为相同的高度，内容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>

Answer 1

height:auto !important; 覆盖height:500px; 在#content和#content iframe 。 如果您摆脱了height:auto !important; 在两个CSS类中，它都可以正常工作。 jsFiddle

好的，这是真正的解决方法，只需将所有内容保持#content iframe然后将display: block添加到#content iframe 。 那就解决了。 iframe是嵌入式框架，因此需要额外的空白。 更新了jsFiddle

Answer 2

如果您设置固定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使用固定高度。

Answer 3

对于现代浏览器，您可以尝试以下操作：

添加position:relative对于#content

从#content iframe删除宽度，高度，最小高度，并添加以下内容：

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

不过不知道该如何对IE 5和6进行处理。