(Sorry if this is a duplicate post)
Hi Dave,
This plugin may be more than you need, but...
The UI/Layout widget will automatically position and size an iframe
(or other element) to fill the entire page, OR allow for a header,
footer, or sidebars. The code and markup are dead-simple. Here is an
example with a page-banner and an iframe. Everything is done for you,
including eliminating the 'body scrollbar'...
$(document).ready(function(){
$("body").layout({
closable: false
, resizable: false
, spacing_open: 0
});
});
<DIV class="ui-layout-north"> [Banner here] </DIV>
<IFRAME class="ui-layout-center" src="myIframe.html" ... >
That's it! I recommend setting an iframe width & height for non-
Javascript browsers, but it's not necessary for Layout. Plus you must
set your preferred iframe options, like scrolling, border, padding,
etc.
Plug-in website: http://layout.jquery-dev.net
Simple iframe demo: http://layout.jquery-dev.net/demos/frames.html
The Layout website itself used iframe pages with a 'banner', like:
http://layout.jquery-dev.net/discuss.html
Hope this helps.
/Kevin
On Jan 24, 5:15 pm, "laredotorn...@zipmail.com"
<laredotorn...@zipmail.com> wrote:
> Hi,
>
> I'm trying to get my iframe to occupy 100% of its parent block
> element. But the height=100% attribute in CSS isn't doing the trick.
> Here's my HTML ....
>
> <td width="177" height="100%" valign="top" class="content-
> rule"><iframe id="fileTreeIframe" style="border:0px none #ffffff;"
> src="file_tree.php" border="0" width="100%" scroll="auto"></iframe></
> td>
>
> and the CSS ...
>
> iframe { display:block; height:100%; width:100%; border:none; }
>
> It doesn't look good right now --http://screencast.com/t/mIzGnUikC.
> Can JQuery help me make my iframe occupy 100% of its parent element?
>
> Thanks, - Dave
