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

Question

[已解决]

因此，我在页面顶部有一个高度恒定的 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

有人知道如何在 CSS 中重新创建 LinkedIn 的功能吗？

Answer 1

我通常会求助于 javascript。

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

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


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