View Full Version : Iframe 100% Height ???????

11-22-2002, 06:08 AM
Has anyone done and/or seen a 100% HEIGHT IFRAME? I'm looking to get an IFRAME to fill in all the way to the bottom of the viewable browser window. I don't want it to go all the way to the bottom of the page content. I just want it to adjust to what the user sees. This way, they wouldn't use the standard browser scrollbar. Am I making sense? It would have to adjust to the user's resolution, etc. -- just like most other things that adjust when using %'s. But, I have been unsuccessful in getting it to work. Any help? Links and/or code are greatly appreciated.

11-22-2002, 06:12 AM
Post the code you have now.
Are you using tables or css for the page layout? If latter you may need the help of js to make things work in IE.
You are welcome to preview the site I'm working on now (for my newly created business) that is intended to surpass anything you've seen so far in the "fluidity" category (provided you are using the right tools ;) ;) ): www.klproductions.com/TemplateT4.html
Help yourself with anything you might find there.

11-22-2002, 06:22 AM
I'll have to take a look at your site tomorrow...got to get some rest before work tomorrow.

I can't say I know everything that I'm trying to do. I can't remember why I have the <!-- --> portions below. It may be old code that I forgot to remove.

I currently have the IFRAME set at "360", but would like it "100%". No, simply substituting the numbers doesn't work.

The table below (with IFRAME) is also set inside another table.

<table border="0" cellpadding="4" cellspacing="0" width="100%">
<td valign="top" nowrap>
<p>some content here</p>
<td valign="top" width="100%">
<img src="../images/1x1.gif" width="1" height="10" border="0"><br>
<!-- <ilayer><layer name="content" top="88" left="600" clip.bottom="400" clip.right="350" width="350" height="400" style="visibility:hidden" src="blank_page.html"></layer></ilayer> -->
<!-- <ilayer><layer name="content" width="350" height="400" style="visibility:hidden" src="blank_page.html"></layer></ilayer> -->
<iframe name="content" id="content" style="position:relative; width:100%; height:360" src="blank_page.html" scrolling="auto" frameborder="0"></iframe>

11-22-2002, 08:14 AM
if you set the height of the iframe to 100%, it will occupy 100% of the containing block, the TD in your case.
since you have only 1 row, putting height="100%" either of the 2 TDs or the <table> itself will cause the iframe's height to occupy the available window height.

btw, the <ilayer> tag is for NS4 which doesn't support <iframe> tag.

11-24-2002, 03:21 AM

Okay, I added a few 100%'s here and there in the table. This helped. I actaully ended up putting 83% for the main table.


I'm primarily (almost 100% -- sorry for the pun) dealing with Internet Explorer (version 5+). The Netscapes are just not a concern at this point.

Here's the deal, I'm trying to get the iframe to maximize its height within the web page -- no matter what resolution, etc. But, I don't want the default scrollbar to appear on the right side of the browser window if at all possible. I know it'll show up on some <=800px resolutions (based on changing browser configurations), and that's okay. As for myself, I'm usign 1024px, and the iframe only extends to the bottom of the links to the left of the iframe. I want the iframe to go to just a few pixels shy of the bottom of the browser window. I thought about adding in a 1x1.gif transparent image and making it really tall, but that would activate the default scrollbar. Not having control over what resolutions and browser configs my users are using, I can't determine a set height for such a transparent image, etc.

And the cloud background image on the left no longer extends to the very bottom because I removed a 100% height designation because it produced the default scrollbar. But, I've been asked to replace this bg image anyway. So I'll find a work-around for that. I'm not worried about it. I did not initially design this site. I've just been asked to manage and maintain it. I've cleaned a few things up, but am still trying to get this iframe issue solved.

Your time, patience, attention, etc. are all appreciated!

11-25-2002, 01:12 AM
you have nested tables. try putting border=1 to all the tables for easy debugging. And put height="100%" for all the TDs. Then let's see from there.

11-25-2002, 01:56 AM
Okay...I've added border="1" to all of the tables in the main content area. I also added it to the iframe.


The very first table has a wide image in it. I had to do this because the page was messing up in various resolutions without it. The iframe wouldn't behave. So, it works well with this table/image (I think).

11-25-2002, 07:25 AM
add height="100%" in the table in one of these lines:

<!--webbot bot="Include" endspan i-checksum="43750" -->
<td valign="top" width="100%">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr><td><img border="0" src="../images/1x1.gif" width="660" height="1"></td></tr>
<table border="1" cellpadding="0" cellspacing="4" width="100%" height="100%">

11-26-2002, 05:10 AM
First off...THANK YOU very much for taking the time to look into this with me!

I tried many combinations of adding the height=100%, but none worked. Somehow (and I'm not too surprised), I overlooked the one you provided. Anyway......it's working great!

I'm off to tackle the next issue.