Log in

View Full Version : unable to show height 100% in firefox


jacks_bfa
07-27-2010, 03:08 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="wrapper_main">
<div class="header">here will come here</div>
<div class="content_area">
<div class="left_col">
<iframe width="196" height="100%" class="for_min_hight" scrolling="yes" src="http://www.google.com"></iframe>
</div>
<div class="right_col">
<iframe width="790" height="100%" class="for_min_hight" src="http://www.microsoft.com" scrolling="auto"></iframe>
</div>
</div>
<div class="footer">here will come footer<br />
<br />
</div>
</div>
</body>
</html>
jacks_bfa
07-27-2010, 03:09 PM
how can i set <iframe> height 100%, it's not working in firefox
traq
07-27-2010, 08:33 PM
You did set it to 100%.

That means that the height should be the same as the height of it's container, in this case, #left_col or #right_col.

Do you want the iframes to be 100% of the window size? If so, you'd need to make every parent element 100% in height also, up to the <body> element. After that, you might have some problems with (browser default) padding and margins; so you might have to change those to 0.

Let me know what you want it to look like, exactly.
jacks_bfa
07-28-2010, 06:11 AM
i trying to streatch iframe 100% as per the data. if the page height increase scroll should to come on the browser right site not in the iframe right side.

please give the solution.
traq
07-28-2010, 02:39 PM
Do you want your layout to look something like this?

http://www.custom-anything.com/files/2512/8032/7951/temp_iframe.png
Sciamano72
03-14-2013, 02:17 PM
Do you want your layout to look something like this?

http://www.custom-anything.com/files/2512/8032/7951/temp_iframe.png

This is exactly what I'm trying to achieve (except for the fact that the middle section is another iframe, and all the three iframes can scroll if content height is >100%) but can't.
Please check here, for my thread on this:

http://www.dynamicdrive.com/forums/showthread.php?73194-Three-columns-(fixed-fluid-fixed)-not-working-in-Firefox&p=291970&posted=1#post291970

Thanks!!
traq
03-14-2013, 05:43 PM
There's a number of three-column layouts in the DD CSS Library (http://www.dynamicdrive.com/style/layouts/category/C10/). Just put one iframe in each column. You can leave out the header/footer if you don't want them.
molendijk
03-15-2013, 11:41 AM
i trying to streatch iframe 100% as per the data. if the page height increase scroll should to come on the browser right site not in the iframe right side.

please give the solution.
What you want is not possible for iframes loading a page from a 'foreign' domain. You can't auto(re)size them.
Brijesh Patel
03-19-2013, 10:32 AM
Please Try this code for the same

html,body{height:100%}

and replace the following line:

*height:auto !important;

with:

height:100%;

thanks