iframe {height：70％;}无法在IE 8和Firefox中运行

Question

我有一个包含div的网站设计，其中我插入了一个iframe来加载页面 header stays at top well
footer stays at bottom very well
content stays at the middle well too

但是iframe没有伸展到容器的整个高度。 i have not mentioned height in pixels in the style

但是当我写作

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

我尝试为#iframeDiv编写样式但似乎没有任何效果！

它伸展到页脚，但这只适用于镀铬。即，也没有感测到背景颜色。火狐显示背景颜色但没有拉伸至72％。如何将所有浏览器的iframe高度拉伸至72％。 ？

Answer 1

检查html页面的DOCTYPE，还可以尝试为HTML和BODY标记添加CSS：

html, body {
    height: 100%;
}

Answer 2

经过长时间与iframe的斗争，我不想明确输入高度值（Px）。由于在 Px 中给出它会因浏览器而异，我使用javascript计算消耗的高度并从窗口高度中减去并使用jquery将其分配给iframe。这就是我所做的。

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