html - CSS:填满屏幕其余部分的 iFrame 未被具有恒定大小的 div 填满

Question

[已解决]

所以我在页面顶部有一个高度恒定的 div，我希望在它下面有一个 iFrame 来填充页面的其余部分。 Google Images 和 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

有谁知道如何用 CSS 重现 LinkedIn 所做的事情？

Answer 1

我通常会求助于 javascript。

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

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


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