两列布局，左列高度约束右列高度，不知道为什么...？答案

【问题标题】：two column layout, left col height constrains right col height, don't know why...?两列布局，左列高度约束右列高度，不知道为什么...？
【发布时间】：2010-10-25 06:32:21
【问题描述】：

我有点卡住了，这是因为我对 html/css 和 iframe 缺乏经验。

基本上，我有一个 LH 列，这是我的菜单。还有一个 RH 专栏，里面是我的内容。 RH 列是 iframe。

问题是我无法让 iframe 的高度等于 100%，它受到 LH 列高度的限制。

见下文； http://www.therussianfrostfarmers.com/

这让我发疯了，它看起来很容易修复。

这是相关html的一部分；

<div id='wrapper'>
          <div id='header'>
                 <img src="images/titleBart.gif" alt="rff"/>
          </div>

          <div id='menu'>
                 <div class='container'>
                          <%obj_itop%>
                          <plug:front_index />
                          <%obj_ibot%>
                 </div> 
          </div>    

          <div id='content'>
                          <!-- text and image -->
                          <plug:front_exhibit />
                          <!-- end text and image -->
          </div>

          <div class='clear-both'>
                 <!-- -->
          </div>
</div>

以及相应的CSS；

#wrapper { 
    margin: 0 auto;
    width:950px; 
    text-align: left; 
    background: #fff; 
    height:100% !important;
} 

.clear-both { clear: both; }

#content {
    width: 760px;
    margin: 20px 0 0 190px;
    padding:0;
    height: 100% !important;
    overflow: auto;
}

#menu {
    width: 170px;
    position:absolute; 
    margin:0;
    padding:0;
    overflow: auto;
}

.container {  
    margin:0;
    padding:0;
}

任何帮助将不胜感激，

感谢卡

【问题讨论】：

标签： php html css iframe

【解决方案1】：

好的，我相信 iframe 已经应用了这种 JS 函数；

<script type='text/javascript'>
function iframer() 
{ 
// get width of #content 
frame_x = $('#content').width(); 
// get height of #menu 
frame_y = $('#menu').height(); 

// apply height and width 
$('#iframed').css('width', frame_x); 
$('#iframed').css('height', frame_y); 
} 

$(document).ready( function() { iframer(); } );
$(window).resize( function() { iframer(); } );
</script>

<iframe src='$url' frameborder='0' id='iframed'></iframe>
EOH;

    return $iframe;

如果我将#menu 高度更改为 50% 并将 BG 变灰，则更容易看到 #menu div 如何影响 #content div 的高度。

http://www.therussianfrostfarmers.com/

【讨论】：

【解决方案2】：

需要使用 javascript 调整 iFrame 的大小 - 您可以使用以下内容轻松完成：

<body onload="resizeFrame(document.getElementById('myframe'))">

  <iframe id="myframe" src="http://www.example.com/foo.html" />

  <script type=”text/javascript”>
    function resizeFrame(f) 
    {
      // Get height of iframe once it has loaded content and then
      // use this for the iframe height in parent doc
      f.style.height = f.contentWindow.document.body.scrollHeight + “px”;
    }
  </script>

上面将评估 iframe 中渲染内容的高度，取该高度，然后将其用作 iframe 容器的高度。

请注意，如果您的 iframed 内容与包含页面位于同一域中，则上述方法将有效。如果不是，由于same origin policy（即little trickier to get around），您将遇到安全限制！

【讨论】：

好的，我相信 iframe 已经应用了这种 JS 功能； EOH;返回$iframe； }
...哎呀对不起，我会再试一次

【解决方案3】：

我对此不是 100% 确定，但我相当肯定如果不使用 JavaScript 来动态调整 iFrame 的大小，就无法做到这一点。如果有，那可能并不容易。

这是因为 CSS 术语中的“100%”只占用尽可能多的空间页面上已有的内容。由于您已经有一个左侧列，因此 100% 只会转到该列的大小。

【讨论】：