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。如果你摆脱了两个CSS类中的height:auto !important;，它就可以正常工作。 jsFiddle

好的，这是真正的修复方法，只需将所有内容保留原样，然后将display: block添加到#content iframe。这解决了它。 iframe是内联框架，因此是额外的空白区域。 Updated 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做什么。

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

3 个答案: