height percentage math javascript for iframe

Here's the deal... I have a externaly loaded iframe called "radioiframe" and I have a local iframe with my page content. As you'll notice my src in "radioiframe" is empty, that's because the source is loaded via javascript (code at end). All works just perfectly but the oly problem I have is when I turn display on the iframe comes and pushes my content down, hidding it (overflow:hidden in body to prevent doble scroll bar). Ive been trying to maybe math it out, the height of "radioiframe" is fixed at 34px, but the "content" height is relative to monitor size and page content. Ive tried to calculate with jQuery the height of the frame and then substract the height ou 34 and set it on the iframe, to no avail. Just to remind that everything is working execpt the setSizes math function.

HTML on frame page.

<div id="radiodiv">
<iframe src="" id="radioiframe" height="34px" width="100%" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="no" allowtransparency="true" style="display:none;"></iframe></div>

<div id="contentdiv">   
<iframe src="home2.php" id="content" name="content" height="100%"  width="100%" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" vspace="0" hspace="0"></iframe></div>

<script type="text/javascript">
function setSizes() {
var containerHeight = $("#content").height();
document.getElementById('content').height = containerHeight - 34;
}
</script>

Javascript for loading source:

function ShowSaburi (){
parent.document.getElementById('radioiframe').src = 'http://www.saburimusic.com/player.php';
parent.document.getElementById('radioiframe').style.display = 'block';
};

function ShowNero (){
parent.document.getElementById('radioiframe').src = 'http://www.radionero.com/player.php';
parent.document.getElementById开发者_运维百科('radioiframe').style.display = 'block';
};

function HideRadio (){
parent.document.getElementById('radioiframe').src = '';
parent.document.getElementById('radioiframe').style.display = 'none';
};

How about styling contentdiv with overflow set to scroll

<div id="contentdiv" style="overflow: scroll;">   
    <iframe src="home2.php" id="content" name="content" height="200px"  width="100%" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" vspace="0" hspace="0"></iframe>
</div>

you can set the height of the div to the max height of the window less 34px for the radioiframe.

Hope this helps.

function ShowSaburi() {
// your methods
// add this
setContentHeight();
}

function setContentHeight() {
   var docHeight = $(document).height();
   if (docHeight){
      var contentHeight = docHeight - 40;
      $('#contentdiv').css({'height': contentHeight+ 'px'});
   }
} 

Just an idea.