Page 1 of 1

iFrame not expand to 100% height

Posted: Wed Aug 12, 2009 1:31 am
by cohq82
I have this below html. And I would like the iFrame to cover the rest of the screen with 100% on whatever left. I tried "100%" and "*" in height attribute but not working. Why is that? Thanks

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container-frame">
<img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/>
<img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/>
<a id="if-username" href="/nvthoai">aaa</a>
<div id="if-box">
</div>
<a id="if-close" href="http://www.yahoo.com" target="_top"> </a>
<div id="if-link">
</div>
<div id="if-star">
</div>
</div>
<iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
</iframe>
</body>
</html>
 
 
 
#container-frame {
background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0;
height:35px;
width:100%;
}

Re: iFrame not expand to 100% height

Posted: Wed Aug 12, 2009 4:21 am
by jayshields
Probably has something to do with margins and padding on that element or the parent elements.

Re: iFrame not expand to 100% height

Posted: Wed Aug 12, 2009 9:39 am
by tr0gd0rr
Is it possible in html? I thought you had to use JavaScript or a frameset instead of an iframe. Looks like your code would be better off using a frameset.

Re: iFrame not expand to 100% height

Posted: Wed Aug 12, 2009 11:23 pm
by cohq82
tr0gd0rr wrote:Is it possible in html? I thought you had to use JavaScript or a frameset instead of an iframe. Looks like your code would be better off using a frameset.
How to use frameset to archive same purpose? Anything is good. Thanks

Re: iFrame not expand to 100% height

Posted: Thu Aug 13, 2009 4:57 pm
by tr0gd0rr
Frameset help:
tizag
w3schools