(HTML & CSS) Can I set an iframe to fill all available space? **Resolved**

**msimmons** · Nov 1st, 2002, 12:52 PM

Can I set an iframe to fill all available space? Like height="*"?
Michael

**The Hobo** · Nov 1st, 2002, 01:52 PM

I don't know how well supported it is, but in IE6, this works:

Code:

<iframe style="height: 100%; width: 100%;"></iframe>

**msimmons** · Nov 1st, 2002, 02:28 PM

Does that tell it to be 100% of the container (in this case the page) or to fill the available space? I think it is the first one cos its going off the page now.

**msimmons** · Nov 4th, 2002, 12:30 PM

**The Hobo** · Nov 4th, 2002, 01:01 PM

It doesn't go off the page for me, man. Do you have it nested in another tag, like a <div>?

**msimmons** · Nov 4th, 2002, 03:40 PM

No but I have something above it. This code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<img src="filler" height="50">
<iframe style="height: 100%; width: 100%;"></iframe>
</BODY>
</HTML>

will give it exactly 50px of scroll bar.

**The Hobo** · Nov 4th, 2002, 03:45 PM

oh. damn

**msimmons** · Nov 4th, 2002, 04:04 PM

yup

I did workaround the problem with the page i was having this time but would like to know in the future so I can get away from framsets

**punkpie_uk** · Nov 5th, 2002, 04:32 AM

have you tried nesting it in a div and setting width and height to 100%?

Also, replace <img src="filler" height="50"> with a div, it should speed up rendering. <div style="width:100%; height:50%;">

**msimmons** · Nov 5th, 2002, 09:53 AM

nesting didn't work

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<img src="filler" height="50">
<div style="height: 100%; width: 100%;">
	<iframe style="height: 100%; width: 100%;"></iframe>
</div>
</BODY>
</HTML>

Sorry to be dense but I don't understand what you mean about the image.

**punkpie_uk** · Nov 5th, 2002, 10:02 AM

Try this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div style="height: 100%; width: 100%;">
  <div style="height:50%; width:100%;"></div>
  <iframe style="height: 50%; width: 100%;"></iframe>
</div>
</BODY>
</HTML>

**msimmons** · Nov 5th, 2002, 10:10 AM

that dosen't give scrollbars because the totals equal 100%. The situation I have is that the page is completely dynamic based on querystring perameters [sic]. The way it is now is, sometimes I have a graphic heading (different ones of different sizes) and sometimes not, then a frame that is a fixed size, then a frame that I need as big as possible but I never know how much room I have. thats why I am using frames now cos of the "*" feature but it still isn't what I want.
thanks
Michael

**jamieoboth** · Dec 14th, 2002, 03:29 PM

umm.m... dont use 'style'. I dont.

Just use <Iframe src="whatever" width="100%" height="100%">

lol works ok on my site, Mike. You just helped me with it

James

**msimmons** · Dec 16th, 2002, 10:42 AM

Originally posted by jamieoboth
umm.m... dont use 'style'. I dont.

Just use <Iframe src="whatever" width="100%" height="100%">

lol works ok on my site, Mike. You just helped me with it

James

Still doesn't work.

**The Hobo** · Dec 16th, 2002, 12:30 PM

Originally posted by jamieoboth
umm.m... dont use 'style'. I dont.

Just because you practice bad coding standards doesn't mean that others should as well. Try running that code through a validator and see what happens.

**jamieoboth** · Dec 16th, 2002, 01:10 PM

lol fine. It was just a suggestion mate... jesus....

**wpearsall** · Dec 16th, 2002, 03:23 PM

try using the following code in your <body> tag:

Code:

topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0"

it will stop IE adding its margin to the page

and hopefully make the width & height propa

**msimmons** · Dec 16th, 2002, 03:25 PM

still wont work

**The Hobo** · Dec 16th, 2002, 05:47 PM

Originally posted by jamieoboth
lol fine. It was just a suggestion mate... jesus....

No need to bring religion into this.

Would you tell a man building a house to use Elmer's Glue when he can't find nails? If you're a lunatic, maybe. So don't tell someone to use bad coding practices either.

**The Hobo** · Dec 16th, 2002, 05:56 PM

You probably don't want tables as your answer, but I think this is valid HTML. I've only tried it in IE 5.5, though:

Code:

<html>
<head>
    <title>blah</title>
</head>
<body>
    <table style="border: 1px solid black; width: 100%; height: 100%;">
        <tr>
            <td><img src="filler" height="120"></td>
        </tr>
        <tr>
            <td style="height: 100%;">
                <iframe src="blah" style="width: 100%; height: 100%;"></iframe>
            </td>
        </tr>
    </table>
</body>
</html>

**msimmons** · Dec 16th, 2002, 06:21 PM

Originally posted by The Hobo
You probably don't want tables as your answer...

Whatever works... and that worked

Thanks!

**wpearsall** · Dec 17th, 2002, 04:07 AM

nuva idea:

I checked my site on an html validator, and topmargin="0" etc, wasn't HTML 4.01 Traditional "Valid"

So i changed it to:

<body style="margin: 0px;">

and dats Valid HTML,

So try that

Like:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>This is my page title</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</head>
<body style="margin: 0px;">

<iframe frameborder="0" style="width:100%; height:100%;" src="myPage.html" name="CommentsFrame"></iframe>

</body>
</html>

Note: This is the way it shud b set out, u can add more Meta Tag's etc, but u shud really have the content-type 1 and the DOCTYPE header

**jamieoboth** · Dec 17th, 2002, 08:27 AM

Originally posted by The Hobo
No need to bring religion into this.

Would you tell a man building a house to use Elmer's Glue when he can't find nails? If you're a lunatic, maybe.

Yes. And yes. Look at the smiling face. Theres no way it could be THAT happy without something being wrong.... Elmers glue? :|

Try no more nails. lol....

**The Hobo** · Dec 17th, 2002, 02:20 PM

Originally posted by jamieoboth
Yes. And yes. Look at the smiling face. Theres no way it could be THAT happy without something being wrong.... Elmers glue? :|

Try no more nails. lol....

Try posting after you've sobered up. You'll make more sense that way.

**Zach Elfers** · Dec 27th, 2002, 11:32 PM

You could also do:

<html>
<head>
<title>Title</title>
</head>
<body style="margin:0px;">
<div style="height:100%;width:100%;">
<img src="filler.ext" height="50">
<div style="height:100%;width:100%;">
<iframe width="100%" height="100%">
</div>
</div>
</body>
</html>

That will probably work.

**msimmons** · Dec 28th, 2002, 12:28 PM

Originally posted by Zach Elfers
You could also do:

<html>
<head>
<title>Title</title>
</head>
<body style="margin:0px;">
<div style="height:100%;width:100%;">
<img src="filler.ext" height="50">
<div style="height:100%;width:100%;">
<iframe width="100%" height="100%">
</div>
</div>
</body>
</html>

That will probably work.

nope

Thread: (HTML & CSS) Can I set an iframe to fill all available space? Resolved

Thread Tools

Display