Iframe {height：70％;}在IE 8和Firefox中不起作用

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>