Iframe { height:70%;} not working in IE 8 and Firefox - html

Question

I have a div contained site design in which i have inserted a iframe to load pages.
header stays at top well
footer stays at bottom very well
content stays at the middle well too
But the iframe isn't stretching to the full height of the container. i have not mentioned height in pixels in the style
But when i wrote
iframe {
margin:0;
padding:0;
min-height:72%;
width:100%;
background-color:#ddd;
}
HTML
<div id="container">
<div id="header"> blah blah </div>
<div id="content">
<div id="menu"> some code of menu </div>
<div id="iframeDiv" class="contentdiv">
<iframe src="#" id="#" width="100%"></iframe>
</div>
</div>
<div id="footer">blah blah</div>
</div>
CSS
html, body {
margin:0; padding:0; height:100%; width:100%;
}
iframe {
margin:0; padding:0; height:72%; width:100%;
}
#container {
min-height:100%; position:relative; width:100%;
}
#content {
padding:10px; padding-bottom:30px;
}
I tried writing styles for #iframeDiv but nothing seems to work!
it stretched till footer, but this works only in chrome. ie is not sensing the background color too. firefox displyed the backgroundcolor but not stretched to 72%. how to stretch iframe height to 72% for all browsers. ?

Answer 1

Check your DOCTYPE of the html page and also you can try to add CSS for the HTML and BODY tag:
html, body {
height: 100%;
}

Answer 2

After a long time struggle with iframe, I didnt want to enter the height value explicitly(Px). Since giving it in Px will vary for browsers i used javascript to calculate the consumed height and subtracted from the window height and assigned it to iframe using jquery. Here is what i did.
<script type="text/javascript">
$(document).ready(function() {
var windowheight = $(window).height();
var headerheight = $("#header").height();
var footerheight = $("#footer").height();
var menuheight = $("#patientMenu").height();
var frameheight = windowheight - (headerheight+footerheight+menuheight+5);
//alert(contentheight);
$('#frameset').css ({
'height' : contentheight
});
});
</script>