...

View Full Version : IFrame height in IE does not take 100%



huss80
05-28-2011, 08:27 AM
I have horizontal drop menu on the top and below that i have three frames..below similar webpage layout.

-------------------------
menu options
-------------------------
frame1 | frame2 | frame3
| |
| |
-------------------------

when i just use frame option, the drop down menu goes behind...it does over lap with the frames. However when i use iframe options, it overlaps on the iframes but then i am not able to set the height to 100% for all 3 iframes. Can you help me with this. In google chrome it is set to 100% but in IE it comes about 20% height only, even though i set to 100%.

is there a problem with IE7, how should i fix it.

code is as below:

<iframe id="left_page" src="left_page.asp" width="8%" height="100%" frameborder="" marginheight="0" marginwidth="0"></iframe>
<iframe id="content" src="content.asp" width="75%" height="100%" frameborder="0" marginheight="0" marginwidth="0" ></iframe>
<iframe id="right_page" src="right_page.asp" width="15%" height="100%" frameborder="0" marginheight="0" marginwidth="0" ></iframe>

huss80
05-28-2011, 01:57 PM
Please help..

huss80
05-30-2011, 01:18 PM
Is there no solution for this..?

AndrewGSW
05-30-2011, 02:22 PM
For 100% height to work you need to give the parent containers this height as well: CSS

html {
height: 100%;
}
body {
height: 100%;
overflow: auto; /* to prevent the body from appearing below the iframes */
}
But the height also includes the menu, etc., so the iframes will probably stretch beyond the browser viewport.

You could consider just giving the iframes a specific height and allowing scrollbars to appear.

Edited: You may need to set the iframe heights to 100% using CSS or the style attribute.

huss80
05-30-2011, 02:41 PM
thanks for the reply...

below code is working very well for a single iframe(width 80%, height 100%), but when i try to add another iframe, it does not work...height of 100% is not achieved in the 2nd iframe.

[CODE]
<iframe id="content" name="content" src="content.asp" width="80%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('content').offsetTop;

// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */

document.getElementById('content').style.height = height;

};
document.getElementById('content').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
[CODE]

second iframe is of width=20% and height=100%, I tried to modify the above code but it isnt working. for the 2nd iframe the height comes as only 20%, i am bad at javascript and not able to modify the above code to make second iframe also as 100% height....can somebody help me in correcting the second iframe...i am desperately in need to get this work.

AndrewGSW
05-30-2011, 03:05 PM
Maybe

<iframe id="content" name="content" src="content.asp" width="80%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
if ( this.offsetTop )
height -= this.offsetTop;

// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */

this.style.height = height;

};
document.getElementById('content').onload = resizeIframe;
document.getElementById('left_page').onload = resizeIframe;
document.getElementById('right_page').onload = resizeIframe;
window.onresize = resizeIframe;
this should refer to the element that triggered the event, I believe.

huss80
05-30-2011, 03:23 PM
nope..that didnt work, on using your code, both are getting height of about 20% only. If i use two separate functions with almost same coding, i get the 1st iframe of 20% and 2nd one comes as 100% of height.



<iframe id="content" name="content" src="content.asp" width="80%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('content').offsetTop;

// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */

document.getElementById('content').style.height = height;

};
document.getElementById('content').onload = resizeIframe;
window.onresize = resizeIframe;
</script>

<iframe id="right_page" name="right_page" src="right_page.asp" width="20%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe1() {
var height1 = document.documentElement.clientHeight;
height1 -= document.getElementById('right_page').offsetTop;

// not sure how to get this dynamically
height1 -= 20; /* whatever you set your body bottom margin/padding to be */

document.getElementById('right_page').style.height = height1;

};
document.getElementById('right_page').onload = resizeIframe1;
window.onresize = resizeIframe1;
</script>




somewhere something needs to be changed so that these two functions are treated separately.

huss80
05-30-2011, 03:47 PM
Thank you AndrewGSW for showing the way...i just made small change in your code and was able to get both the iframes to 100% height.

you missed to include this in your function and i just tried by adding to it and worked perfectly:

document.getElementById('content').style.height = height;
document.getElementById('right_page').style.height = height;




<iframe id="content" name="content" src="content.asp" width="80%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<iframe id="right_page" name="right_page" src="right_page.asp" width="20%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('content').offsetTop;

// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */

document.getElementById('content').style.height = height;
document.getElementById('right_page').style.height = height;
};
document.getElementById('content').onload = resizeIframe;
document.getElementById('right_page').onload = resizeIframe;
window.onresize = resizeIframe;
</script>


Thank you very much for your help :thumbsup:

huss80
05-30-2011, 04:18 PM
Ooops...one other problem...though it has solved but there is an issue with the browser...

In IE it works fine...height is taken as 100%
but in google chrome...both iframes are about 20% only... :(

Is there any other alternative...what best can be used instead of frames...or is best to have a single page and have different pages called each time it loads a new page.

AndrewGSW
05-30-2011, 05:54 PM
I've been playing with this and have got the following to work (almost ;) ). It resizes the iframes to the viewport height when the page is loaded or re-loaded.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Setting iFrame Heights</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
iframe {
margin: 0;
border: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var offs = 0;
function ResizeI(e) {
var hgt, evt = e || window.event;
var elem = evt.target || evt.srcElement;
if ( !offs ) {
var obj = elem;
if ( obj.offsetParent ) {
do {
offs += obj.offsetTop;
} while ( obj = obj.offsetParent );
}
}
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
elem.style.height = (hgt-20) + 'px';
}
function ResizeAllF() {
if ( !offs ) return true;
var fmes = document.getElementsByTagName('iframe');
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
for ( var i=0, iLen = fmes.length; i < iLen; i++ ) {
fmes[i].style.height = (hgt-20) + 'px';
}
}
</script>
</head>
<body>
<h1>Dynamic Height for iFrames</h1>
<p>Sets the heights of the iFrames to fill the viewport. (Setting html, body and iframe height to
100% would work almost as well?!)</p>
<p>This doesn't always work properly in IE as it cannot determine the clientHeight until
the page has loaded - it works on a page refresh.</p>

<iframe id="left_page" src="frame1.html" width="8%" ></iframe>
<iframe id="content" src="frame2.html" width="75%%" ></iframe>
<iframe id="right_page" src="frame3.html" width="15%" ></iframe>
<script type="text/javascript">
if ( window.addEventListener ) {
document.getElementById('left_page').addEventListener('load',ResizeI,false);
document.getElementById('content').addEventListener('load',ResizeI,false);
document.getElementById('right_page').addEventListener('load',ResizeI,false);
window.addEventListener('resize',ResizeAllF,false);
} else {
document.getElementById('left_page').attachEvent('onload',ResizeI);
document.getElementById('content').attachEvent('onload',ResizeI);
document.getElementById('right_page').attachEvent('onload',ResizeI);
window.attachEvent('onresize',ResizeAllF);
}
</script>
</body>
</html>
But for IE(8) aargh! :mad: it doesn't determine the viewport height first time, so I've had to set a default height of 600. When then page is reloaded it correctly determines the height?!

I haven't added the function to window.resize, although you can do so if you wish. (I don't like to use this.)

[Ideally, I suppose, the onload events for the iframes should be added within the iframes themselves, otherwise document.getElementById('content'), etc., may not yet be available.]

AndrewGSW
05-30-2011, 06:04 PM
.. I may have mis-understood your requirement. Never mind :thumbsup:

huss80
05-31-2011, 06:29 AM
Your code perfectly works fine :) thank you.:cool:

Would you recommend me to use this format??? i am not sure if this is the right way of building the website. Just above the 3 iframes i have a multi-level drop menu bar, when any of the menu option is selected it would display the corresponding page in the content page of the iframe(center iframe). I see too many scroll bars going around, which doesnt look that good.

AndrewGSW
05-31-2011, 12:50 PM
I don't think this is the best approach, particularly as IE can mis-behave on first loading the page - it can fail to correctly determine the browser height until the page is loaded.

Tweaking the code as follows will reduce the number of scrollbars appearing:

elem.style.height = (hgt-20) + 'px';
In particular, this should prevent the scrollbar for the browser window appearing (unless there is other content on the page).

Sometimes the best approach is to do nothing :thumbsup:. Either just let the iframes assume the height of their content or, perhaps better, just set them all to a specific pixel height: scrollbars will only then appear if the content is taller than the height you set.

The previous approach metioned was to set the html and body height to 100%, and set the iframe heights to, perhaps, 80%. Then the iframe heights would adjust if the browser is resized. (I think I still prefer the fixed pixel height approach :) )

Out of interest :D I modified the code so that it resizes the iframes when the browser is resized, below. But I'm still having to reload the page in IE before it behaves :mad:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Setting iFrame Heights</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
iframe {
margin: 0;
border: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var offs = 0;
function ResizeI(e) {
var hgt, evt = e || window.event;
var elem = evt.target || evt.srcElement;
if ( !offs ) {
var obj = elem;
if ( obj.offsetParent ) {
do {
offs += obj.offsetTop;
} while ( obj = obj.offsetParent );
}
}
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
elem.style.height = (hgt-20) + 'px';
}
function ResizeAllF() {
if ( !offs ) return true;
var fmes = document.getElementsByTagName('iframe');
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
for ( var i=0, iLen = fmes.length; i < iLen; i++ ) {
fmes[i].style.height = (hgt-20) + 'px';
}
}
</script>
</head>
<body>
<h1>Dynamic Height for iFrames</h1>
<p>Sets the heights of the iFrames to fill the viewport. (Setting html, body and iframe height to
100% would work almost as well?!)</p>
<p>This doesn't always work properly in IE as it cannot determine the clientHeight until
the page has loaded - it works on a page refresh.</p>

<iframe id="left_page" src="frame1.html" width="8%" ></iframe>
<iframe id="content" src="frame2.html" width="75%%" ></iframe>
<iframe id="right_page" src="frame3.html" width="15%" ></iframe>
<script type="text/javascript">
if ( window.addEventListener ) {
document.getElementById('left_page').addEventListener('load',ResizeI,false);
document.getElementById('content').addEventListener('load',ResizeI,false);
document.getElementById('right_page').addEventListener('load',ResizeI,false);
window.addEventListener('resize',ResizeAllF,false);
} else {
document.getElementById('left_page').attachEvent('onload',ResizeI);
document.getElementById('content').attachEvent('onload',ResizeI);
document.getElementById('right_page').attachEvent('onload',ResizeI);
window.attachEvent('onresize',ResizeAllF);
}
</script>
</body>
</html>

AndrewGSW
05-31-2011, 01:12 PM
Sorry, last revision I promise ;). This version works much better with IE: if IE doesn't determine the browser height then it just uses a default height of 600px for the iframes and assumes an offset for these of 150px. That is, the distance from the browser top to the top of the iframe is (approx.) 150px.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Setting iFrame Heights</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
iframe {
margin: 0;
border: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var offs = 0;
function ResizeI(e) {
var hgt, evt = e || window.event;
var elem = evt.target || evt.srcElement;
if ( !offs ) {
var obj = elem;
if ( obj.offsetParent ) {
do {
offs += obj.offsetTop;
} while ( obj = obj.offsetParent );
}
}
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) {
offs = 150; /* Aaargh! IE */
hgt = 600;
}
elem.style.height = (hgt-20) + 'px';
}
function ResizeAllF() {
if ( !offs ) return true;
var fmes = document.getElementsByTagName('iframe');
if ( window.innerHeight ) {
hgt = window.innerHeight;
}
else {
hgt = document.documentElement.clientHeight;
}
hgt -= offs;
if ( !hgt || hgt <= 0 ) hgt = 600; /* Aaargh! IE */
for ( var i=0, iLen = fmes.length; i < iLen; i++ ) {
fmes[i].style.height = (hgt-20) + 'px';
}
}
</script>
</head>
<body>
<h1>Dynamic Height for iFrames</h1>
<p>Sets the heights of the iFrames to fill the viewport. (Setting html, body and iframe height to
100% would work almost as well?!)</p>
<p>This doesn't (currently) work properly in IE as it cannot determine the clientHeight until
the page has loaded - it works on a page refresh.</p>

<iframe id="left_page" src="frame1.html" width="8%" ></iframe>
<iframe id="content" src="frame2.html" width="75%%" ></iframe>
<iframe id="right_page" src="frame3.html" width="15%" ></iframe>
<script type="text/javascript">
if ( window.addEventListener ) {
document.getElementById('left_page').addEventListener('load',ResizeI,false);
document.getElementById('content').addEventListener('load',ResizeI,false);
document.getElementById('right_page').addEventListener('load',ResizeI,false);
window.addEventListener('resize',ResizeAllF,false);
} else {
document.getElementById('left_page').attachEvent('onload',ResizeI);
document.getElementById('content').attachEvent('onload',ResizeI);
document.getElementById('right_page').attachEvent('onload',ResizeI);
window.attachEvent('onresize',ResizeAllF);
}
</script>
</body>
</html>
I'm happy with this version :) Andy.

huss80
05-31-2011, 06:02 PM
:cool: Thank you very much Andrew for working hard on this..i really appreciate it, I totally lost hope before you started replying to it :). But i was lucky enough to get you.

Just one more small doubt..I am not sure if its the right behaviour or not...

this is what i have for my website....

Just above the 3 iframes i have the javascript horizontal multi level menu bar and little above that i am planning to have the website banner. when user select any of the option from the menu, it shows up on the content area(middle iframe). I am able to get the data to content area but the question here is when i select any of the menu option, the url remains the same...ie if i open the website like http://localhost/abc/main.html...it remains same throughout even though i select menu option...the url doesnt change as per my selection...is this correct behaviour for the menu selection...i am new in the javascript world..infact little new in coding world too :o

i hope i was clear in explaining my concern...

Once again Thank you very much for your help....:thumbsup::thumbsup:

AndrewGSW
05-31-2011, 06:35 PM
Hi.

When you select an option that re-loads the iframe with different content, it won't change the url/address of the current page - because you're still on the same page :).

[If you want to know which content is currently loaded in the iframe you could use the location's hash value..]

BTW If you add a banner to the top of your page then you may want to adjust this line

offs = 150; /* Aaargh! IE */
and set 150 to a higher value. This is an estimated value for the distance between the top of the browser and the top of the iframes for retarded IE.

huss80
05-31-2011, 07:31 PM
I didnt get the last point..i am trying to change the value of "offs"..but i dont see the difference.

Also I am using below to add the banner just above the menu bar but there is somthing missing in it...adding height option doesnt work very well with the img attribute.

<div>
<img src="./images/banner2.jpg" width="100%"></img>
</div>

AndrewGSW
05-31-2011, 08:19 PM
Hello. You could leave 'offs' at 150 and ignore it: it's only there for Internet Explorer if it fails to determine the browser height.

<div>
<img src="./images/banner2.jpg" width="100%"></img>
</div>
There is no closing tag for 'img' and setting a percentage height for it will most likely stretch it to a percentage of the browser window. If you know that the image height is, say, 50px then for a DOCTYPE of XHTML use

<div>
<img src="./images/banner2.jpg" width="100%" height="50" />
</div>
or for HTML

<div>
<img src="./images/banner2.jpg" width="100%" height="50" >
</div>
Stretching the image can cause distortion so it's worth testing in different browsers.

This (http://www.htmlcodetutorial.com/images/_IMG_WIDTH.html)page has some interest info about image height/width.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum