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

问题描述

我有一个div包含的网站设计，其中我插入了一个iframe加载网页。

标题保持在顶部

页脚停留在底部

内容也停留在中间井

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编写样式，但没有任何效果！

它延伸到页脚，但这只适用于chrome。即也不感测背景颜色。 firefox排除了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 {height：70％;}在IE 8和Firefox中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！