1

我有一个简单的 4 面板网页，主要使用 div 和 css 设置。面板 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>
4

3 回答 3

3

height:auto !important;覆盖height:500px;in#content和 in #content iframe。如果你去掉height:auto !important;两个 CSS 类中的 ，它就可以正常工作。jsFiddle

好的，这是真正的解决方法，只需将所有内容保持原样并添加display: block到#content iframe. 这解决了它。iframe 是内联框架，因此有额外的空白。更新了 jsFiddle

于 2013-04-16T01:42:21.497 回答
1

如果你设置了一个固定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 及以下版本。要么你必须对menuandcontent或 javascript 使用固定高度。

于 2013-04-16T01:44:31.077 回答
1

对于现代浏览器，你可以试试这个：

添加position:relative到#content

从中删除宽度，高度，最小高度#content iframe并添加它：

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

不过，不知道要为 IE 5 和 6 做什么。

于 2013-04-16T01:44:54.617 回答