Question

我有点卡住了，这是因为我对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;
}

非常感谢任何帮助，

感谢cam

Answer 1

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

这种情况正在发生，因为CSS术语中的“100％”只占用了页面上所占用的空间。由于您已经有一个左栏，100％只会达到该栏的大小。

Answer 2

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

<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，您将遇到安全限制！

Answer 3

好吧，我相信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/

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

3 个答案: