我有一个简单的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>

===============>>#1 票数:3 已采纳

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

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

===============>>#2 票数:1

如果您设置固定height:500px; 而且iframe比这高,那么您将在侧面看到一个滚动条。

如果您始终想要固定的高度,请同时删除以下两个height: auto !importantmin-height: 500px ,仅保留height:500px

  • height-auto :浏览器计算高度。 这是默认值。
  • min-height :定义最小高度

下面将使menucontent始终具有相同的高度。

的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及以下版本上将不起作用。 您必须为menucontent或JavaScript使用固定高度。

===============>>#3 票数:1

对于现代浏览器,您可以尝试以下操作:

添加position:relative对于#content

#content iframe删除宽度,高度,最小高度,并添加以下内容:

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

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

  ask by baixiwei translate from so

未解决问题?本站智能推荐: