Styling iframes

问题

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.

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

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?

回答1:

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%;
}

here is the fiddle

http://jsfiddle.net/bAfBs/

来源：https://stackoverflow.com/questions/14679160/styling-iframes