Advanced Search

Results 1 to 9 of 9

Thread: 100% height IFRAME content

  1. #1
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 100% height IFRAME content

    Hi,

    When the content page (iframe's src) contains a div with a height of 100% the content always exceeds the iframe's height and thus causes a scrollbar to appear, which I dont want.

    I want the height of the content to fit EXACTLY inside my iframe. Why won't this work?

  2. #2
    Join Date
    Apr 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    well.. I'm by no means an expert... far from it... I'm more of a cut & paste hack... but this works for me...

    remove the 100% height from the div.

    enter this into the <head> section of the parent

    <script language="JavaScript">
    <!--
    function calcHeight()
    {
    //find the height of the internal page
    var the_height=
    document.getElementById('the_iframe').contentWindow.
    document.body.scrollHeight;

    //change the height of the iframe
    document.getElementById('the_iframe').height=
    the_height;
    }
    //-->
    </script>


    Then call the iframe like this...
    <iframe src="whatever.html" id="the_iframe" onLoad="calcHeight();" id="main" height="1"></iframe>

    Hope it helps...

  3. #3
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    In Firefox, height:100&#37; ALSO calculates the padding/margins into the the equation. To make sure it is exactly 100%:
    Code:
    * {padding:0px;margin:0px;}
    - Mike

  4. #4
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, so how can I pull off a 100% height with a margin in the iframe document?

    I want my 100% height and 100% width div (thats inside the iframe) to have either padding or margin, but not exceed the document width/height?

    Possible? (without js tweaking )

  5. #5
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    Do you have access to the page within the iframe?
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

  6. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Ok, so how can I pull off a 100&#37; height with a margin in the iframe document?
    Set a padding to the elements inside the div with the height of 100%.
    - Mike

  7. #7
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thankyou dojjen69 !!!!!!!
    your answer just helped me with my iframe height trouble, i'm so relieved...
    (had to take out the - id="main" - bit though!)
    you're the bestest.

    jess

  8. #8
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    The id="main" shouldn't have anything to do with it, but I guess if it works, it works.
    - Mike

  9. #9
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 100% iFrame height

    I've been searching for days for a fix with most results advising it cant be done [goal to have an external site in one of my pages via iFrame with the iFrame height adjusted to the length of the external sites content with no vertical scroll bar in the iFrame unless the external sites page is long [so no vertical scroll bar on the browser either, so no 2 scroll bars, only 1 for the iFrame]

    Finally found a solution on this page: http://www.frontpagewebmaster.com/m-89000/tm.htm by amir_harel to his site: http://www.amirharel.com/2009/07/28/implementing-iframe-toolbar/

Bookmarks

Posting Permissions

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