【问题标题】：CSS: iFrame that fills up rest of screen not being filled up by a div with a constant sizeCSS：填充屏幕其余部分的 iFrame 未被具有恒定大小的 div 填充
【发布时间】：2011-06-10 13:47:52
【问题描述】：

[已解决]

所以我在页面顶部有一个高度恒定的 div，我希望它下面有一个 iFrame 填充页面的其余部分。 Google 图片和 LinkedIn 做的事情非常相似

请参阅：http://www.linkedin.com/share?viewLink=&sid=s420444224&url=http%3A%2F%2Flnkd%2Ein%2FcnjYt4&urlhash=ZGYM&pk=nprofile-view-success&pp=1&poster=22330283&uid=5484658853024890880&trk=NUS_UNIU_SHARE-title)。

这是我现在拥有的 CSS 代码：

#header {
  height: 60px;
  float: top;
  position: absolute;
}
#iframe {
  margin-top:61px;
  float: bottom;
  position: absolute;
}

另外，在 HTML 中，我将 iFrame 设置为 99% 的宽度和 90% 的高度。

但这不是很好。我只希望 iFrame 有滚动条，但是当我开始减小窗口大小时，它的一部分变得隐藏（几乎没有）。结果，出现了第二组滚动条。顺便说一句，这是我在尝试解决问题时提到的上一个 SO 问题：CSS two divs next to each other

有谁知道如何重新创建 LinkedIn 在 CSS 中所做的事情？

【问题讨论】：

你认为float: top和float: bottom在做什么？
另外，您需要支持哪些浏览器/版本？
三十点，我不确定。老实说，我正在尽我所能让它发挥作用。不过，我链接到的另一个 SO 问题的答案建议将它们放入。
哦，我想支持尽可能多的浏览器。但目前我正在测试 Safari 5，所以这是最重要的。
float 的唯一有效值是：left | right | none | inherit。 top 和 bottom 不起作用。

标签： html css

【解决方案1】：

我通常会使用 javascript。

使用 jquery 库，您可以以非常简单的方式执行以下操作。

$().ready(function() {
        $('#iFrame').height($(window).height() - 62);
    });


$(window).resize(function() {
        $('#iFrame').height($(window).height() - 62);
    });

【讨论】：

请将答案标记为已接受，如果它是您想要的，请投票给它。我确定还有其他解决方案。我只是喜欢 jquery，它很简单。
我将答案标记为已接受，但我没有足够的声望来投票给你。不过，当我这样做时，我会尝试回来投票给你。