html - iframe { 高度 :70%;} not working in IE 8 and Firefox

Question

我有一个包含 div 的网站设计，我在其中插入了一个 iframe 来加载页面。
header 保持在顶部
页脚很好地保持在底部
内容也留在中间井

但是 iframe 没有拉伸(stretch)到容器的整个高度。 我没有在样式中提到以像素为单位的高度

但是当我写的时候

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 displyed backgroundcolor 但没有拉伸(stretch)到 72%。如何将所有浏览器的 iframe 高度拉伸(stretch)到 72%。 ？

Answer 1

检查您的html页面的DOCTYPE，您也可以尝试为HTML和BODY标签添加CSS:

html, body {
    height: 100%;
}