0

我有一个包含 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 编写样式，但似乎没有任何效果！

它一直延伸到页脚，但这仅适用于 chrome。即也没有感应到背景颜色。Firefox 显示了背景色，但没有拉伸到 72%。如何将所有浏览器的 iframe 高度拉伸到 72%。? 在此处输入图像描述 在此处输入图像描述

4

2 回答 2

1

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

html, body {
    height: 100%;
}
于 2013-05-11T11:18:33.230 回答
0

经过长时间与 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>
于 2013-05-14T05:27:20.623 回答