造型iframe [英] Styling iframes

问题描述

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

I'm trying to display two websites on an ASP.NET MVC page. The first website should appear in the upper 130 or so pixels, and the second website should use up all remaining vertical space. Both websites should use up the entire width of the browser.

有一个我想要的例子这里，但它使用带有< frame> 标签的框架集，现在已弃用。

There is an example of what I want here, but it uses a frameset with <frame> tags, which are now deprecated.

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

So I've started a jsFiddle to try and arrange two <iframe> tags instead. I've got most of it but am unable to have the second website use up all the remaining vertical space. (I would prefer not to use jQuery unless it's absolutely necessary.)

有没有人知道丢失的部分？

Does anyone know the missing piece?

推荐答案

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

By setting an absolute position for the content frame you are able to position it 130px from the top, which is the height of your header. Then also set it to 0 from the bottom. This produces the effect of stretching it to fill the remaining height of the viewport.

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

这里是小提琴

http://jsfiddle.net/bAfBs/

这篇关于造型iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！