Home/ Questions/Q 198627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T16:57:13+00:00

I’m a little stuck, it’s due to my inexperience with html/css and iframes. Basically,

  • 0

I’m a little stuck, it’s due to my inexperience with html/css and iframes.

Basically, I’ve got a LH column, which is my menu. and a RH column which house’s my content. the RH column is a iframe.

The problem is i can’t get the height of the iframe to equal 100%, it’s constrained by the height of the LH column.

See below;
http://www.therussianfrostfarmers.com/

it’s driving me nuts, its seems so simple to fix.

Here’s a portion of the relevant 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>

and the corrosponding 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;
}

Any help would be much appreciated,

thanks cam

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The iFrame will need to resized using javascript – you can do it fairly easily using something like the below:

    <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>

    The above will evaluate the height of the rendered content in the iframe, take that height and then use it as the height of the iframe container.

    Note, the above will work if your iframed content is on the same domain as the containing page. If it isn’t, you’ll run into security restrictions due to the same origin policy, which is a little trickier to get around!

    • 0