Two column layout, the left column height limits the right column height, not sure why ...?
I'm a little stuck, this is due to my inexperience with html / css and iframes.
Basically I have a LH column which is my menu. and the RH column which hosts my content. the RH column is an iframe.
The problem is that I cannot get the iframe height to be 100%, it is limited by the LH column height.
See below; http://www.therussianfrostfarmers.com/
it turns me on, it seems so easy to fix.
Part of the relevant html goes here;
<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 aggressive 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
a source to share
The iFrame will need to be resized using javascript - you can do this quite easily using something like 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 displayed content in the iframe, take that height and then use that 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 is not, you will face security restrictions due to the same origin policy , which is a little harder to get around !
a source to share
I'm not 100% sure on this one, but I'm sure there is no way to do it without using JavaScript to dynamically size the iFrame. And if possible, it probably won't be easy.
This is because "100%" in CSS terms only takes up as much space as possible on what is already on the page. Since you already have a left column, 100% will only fit the size of that column.
a source to share
ok, I believe the iframe has already applied such a JS function 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 the gray BG, then it's easier to see how the #menu div affects the #content div's height.
a source to share