Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts

    IFrame height in IE does not take 100%

    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>

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Please help..

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Is there no solution for this..?

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    For 100% height to work you need to give the parent containers this height as well: CSS
    Code:
    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.
    Last edited by AndrewGSW; 05-30-2011 at 02:24 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Maybe
    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;
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    huss80 (05-30-2011)

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

    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>
    
    <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.

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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;


    Code:
    <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

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Code:
    <!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! 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.]
    Last edited by AndrewGSW; 05-31-2011 at 12:54 PM. Reason: Revised code
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    .. I may have mis-understood your requirement. Never mind
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    New Coder
    Join Date
    May 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Your code perfectly works fine thank you.

    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.

  • #13
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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:
    Code:
    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 . 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 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
    Code:
    <!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>
    Last edited by AndrewGSW; 05-31-2011 at 12:56 PM. Reason: Oops, edited wrong code
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #14
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Code:
    <!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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    huss80 (05-31-2011)

  • #15
    New Coder
    Join Date
    May 2011
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

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

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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •