我想设计一个带有横幅和iframe的网页。我希望iframe可以填充所有剩余的页面高度,并在浏览器调整大小时自动调整大小。是否有可能不编写JavaScript代码,只使用CSS来完成?

我尝试在iframe上设置高度:100%,结果非常接近,但iframe试图填充整个页面高度,包括横幅div元素的30px高度,所以我得到了不必要的垂直滚动条。它并不完美。

我尝试了CSS的margin, padding属性在DIV上成功地占据了网页的整个剩余高度,但这个技巧在iframe上不起作用。

<身体> < div风格= "宽度:100%;高度:30 px;background - color: # cccccc;" > < / div >旗帜 <iframe src="http: //www.google.com.tw" style="width:100%;高度:100%;" > < / iframe > 身体< / >


当前回答

也许这个问题已经有了答案(上面的一些答案是“正确的”方法),但我想我只是补充我的解决方案。

我们的iFrame是在一个div中加载的,因此我需要一些其他的窗口。看到我们的项目已经严重依赖jQuery,我发现这是最优雅的解决方案:

$("iframe").height($("#middle").height());

当然,“#middle”是div的id。你需要做的唯一额外的事情是,每当用户调整窗口大小时,召回这个大小变化。

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});

其他回答

另一种选择是使用vh

<iframe src='/' style="display:block; border:none; height:100vh; width:100%;"></iframe>

我是这么做的。我也遇到了同样的问题,最后花了几个小时在网上搜索资源。

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

我把这个添加到头部部分。

请注意,我的iframe位于一个有3行1列的表的中间单元格内。

你不能设置iframe高度为%,因为你的父体高度不是100%,所以让父体高度为100%,然后应用iframe高度为100%

For eg.
<html>
<head>
<style>
html,body{height:100%}
</style> 
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>

您可以通过在加载/调整大小事件上测量正文大小并将高度设置为(full height - banner height)来实现这一点。

请注意,目前在IE8 Beta2中,您不能执行此onresize操作,因为该事件目前在IE8 Beta2中已中断。

我使用display:table来修复类似的问题。它几乎适用于此,留下一个小的垂直滚动条。如果您试图用iframe以外的东西填充这个灵活的列,它可以工作(不是

使用下面的HTML

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
    </div>
  </div>
</body>

更改外部div以使用display:table,并确保它具有宽度和高度设置。

.outer {
  display: table;
  height: 100%;
  width: 100%;
}

将横幅设置为一个表格行,并设置它的高度为您的偏好:

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

在你的iframe(或任何你需要的内容)周围添加一个额外的div,并使它成为一个高度设置为100%的表行(设置它的高度是至关重要的,如果你想嵌入一个iframe来填充高度)

.iframe-container {
  display: table-row;
  height: 100%;
}

下面是一个jsfiddle显示它在工作(没有iframe,因为这似乎不工作在小提琴)

https://jsfiddle.net/yufceynk/1/