Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations MikeeOK on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

need to size iframe height & width at 100%

Status
Not open for further replies.

blueindian1

Programmer
Apr 24, 2001
150
US
hello all,

i have this code (simplified)

Code:
iframe.html:
<table>
  <tr>
   <td>
     <iframe src=&quot;page.aspx&quot; height=400 width=400>
   </td>
  </tr>

  <tr width=100%>
    <td width=100% align=center>
      <input type=submit>
    </td>
  </tr>
</table>

page.aspx:
this is a asp.net page that displays rows of images with information about them.  each row has a thumbnail.

as users upload images, the height that page.aspx requires increases. once it passes the 400px defined for the iframe height, a scroll bar appears.

i don't want the scrollbar. but i can't just set the height to a very high number either, because i need the button which is under the iframe to always be right below the last row of images.

basically, i need to set the height to 100% but when i do that nothing appears.


any advice???

tIa!

 
you could set the height to javascript variable screen.availHeight (minus whatever you need to make button appear)
 
nevermind, that won't work anyway. as the number of pictures uploaded increases, the screen.availHeight remains the same. i need to increase the height of the iframe as number of pictures increases.
 
ok, instead of:

<iframe src=&quot;page.aspx&quot; height=400 width=400>

use:

<iframe src=&quot;page.aspx&quot; id=&quot;myiFrame&quot;>

and in the body tag call a function:

onload=&quot;setSize()&quot;

finally, with the rest of your javascript at the top of the page:

function setSize(){
obj = document.getElementById('myiFrame')
obj.width = screen.availWidth
obj.height = screen.availHeight
//subtract from this value to make height less than 100%
}

I haven't tested this, but it should work...
 
If it is an increasing problem, you can do the increase, and test to see if it is bigger than the screen.availheight. If so, then simply resize it back down.
 
this just keeps getting more complicated.

the larger problem is that i'm not refreshing the page that the iframe itself is on, just the contents of the iframe.

and, as far as i know, there id no way to change the dimesions of the iframe without posting the page. although, if there is, someone please let me know!
 
I am actually having the same problem, and even if I set the height to 100% I still get a small iframe with vertical scroll bars. I can cut out the scroll bars by using scrolling=&quot;no&quot; but then only half the page inside of the iframe shows up. Also, I am putting a shopping cart checkout page within this iframe and need it to expand to list of items ordered. I am using IE6, and it still doesn't work, however I need it to be compatible with other browser types as this is a business application.

Screen.availHeight doesn't work either as I'm not formatting it to the screen, I'm formatting it to the text inside of the iframe.
 
I think a frameset might be a better solution than an IFRAME. Here is a quick example:

NAME THIS frame1.htm
<html><head><title>Frame 1</title>
<style>body {color:black; background:blue}</style>
</head><body><div align=center>
<input type=submit />
</div></body></html>

NAME THIS frame2.htm (ultimately replace with your ASP page)
<html><head><title>Frame 2</title>
<style>body {color:black; background:yellow}</style>
</head><body><div align=center>
YOUR ASP FRAME HERE
</div></body></html>

NAME THIS frameset.htm
<html><head><title>Frameset.htm</title></head>
<frameset cols=&quot;200,*&quot; frameborder=0 border=0>
<frame src=&quot;frame1.htm&quot; name=&quot;LEFT&quot; scrolling=&quot;no&quot; />
<frame src=&quot;frame2.htm&quot; name=&quot;RIGHT&quot; scrolling=&quot;yes&quot; />
</frameset></html>

Clive
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top