css - 样式化 iframe

Question

我试图在 ASP.NET MVC 页面上显示两个网站。第一个网站应该出现在上方 130 像素左右，第二个网站应该用完所有剩余的垂直空间。两个网站都应该用完浏览器的整个宽度。

有一个我想要的例子here , 但它使用了带有 <frame> 的框架集标签，现在是 deprecated .

所以我开始了 jsFiddle试着安排两个<iframe>标签代替。我已经掌握了大部分内容，但无法让第二个网站用完所有剩余的垂直空间。 (除非绝对必要，否则我宁愿不使用 jQuery。)

有谁知道丢失的部分吗？

Answer 1

通过为内容框架设置绝对位置，您可以将其定位在距离顶部 130 像素的位置，这是标题的高度。然后从底部也将其设置为0。这会产生拉伸(stretch)它以填充视口(viewport)剩余高度的效果。

#contentdiv {
    width: 100%;
    position:absolute;
    top:130px;bottom:0;
}
#contentframe {width: 100%;height:100%;
}

这是 fiddle

http://jsfiddle.net/bAfBs/