ansaurus

Question

two column layout, left col height constrains right col height, don't know why...!?!

Answer 1

+1 A:

I'm not 100% sure on this, but I'm fairly certain that there is no way to do this without using JavaScript to dynamically size the iFrame. And if there is, it probably isn't easy.

It's happening because '100%' in CSS terms only takes up as much space as it can of what is already on the page. Since you have a left-hand column already, 100% will only go to the size of that column.

musicfreak 2009-05-11 12:25:03

Answer 2

A:

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!

ConroyP 2009-05-11 12:34:19

ok, i believe the iframe has already got this JS sort of function applied to it;<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;}

Cam 2009-05-11 12:52:10

...oops sorry, i'll try that again

Cam 2009-05-11 12:52:44

Answer 3

A:

ok, i believe the iframe has already got this sort of JS function applied to it;

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

if i change the #menu height to 50% and grey the BG then its easier to see how the #menu div is effecting the height of the #content div.

http://www.therussianfrostfarmers.com/

Cam 2009-05-11 12:59:21

ansaurus

tags:

views:

answers:

two column layout, left col height constrains right col height, don't know why...!?!

related questions