IFRAME {身高：70％;}在IE 8和Firefox不工作 [英] Iframe { height:70%;} not working in IE 8 and Firefox

问题描述

我在我所插入iframe来加载网页的div包含的网站设计。

头顶部停留以及

页脚底部保持得非常好

内容停留在中间也很好

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

但是的IFRAME不延伸到容器的整个高度。 我没有在样式提到的像素高度

But the iframe isn't stretching to the full height of the container. 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，但似乎没有任何工作！

它拉长到尾，但是这只能在镀铬。即不敏感的背景色也。火狐持续显示的的backgroundColor而不是拉伸到72％。如何拉伸iframe的高度，以72％的所有浏览器。 ？

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

推荐答案

通过iframe的时间长了斗争，我没有想进入高度值明确（PX）。由于给它的 Px活性将为浏览器我用JavaScript来计算消耗的高度，并从窗口高度减去并赋予它使用jquery iframe的不同而不同。这里是我做到了。

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>

这篇关于IFRAME {身高：70％;}在IE 8和Firefox不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！