iframe auto height

    Question by:
    On

    Topics:

    I am looking to create a simple set of 3 iframes like the diagram below with A and B being static in height and C is an autofit to the size of the window.

    ----------------------------
               A   (77px)
    ----------------------------
               B   (33px)
    ----------------------------


               C   (auto)


    ----------------------------

    I am basically looking to replace old frame code that looked like this....
    <body>
        <frameset rows="74,33,*" framespacing="0" border="0" frameborder="0">
              <frame src="A.asp" name="A" scrolling="no" noresize>
              <frame src="B.asp" name="B" scrolling="no" >
              <frame src="C.asp" name="C" scrolling="auto" >
        </frameset>
    </body>

    to iframes that look something like this...
    <body>
    <iframe name="A" width="100%" height="74" frameborder="0" scrolling="no" src="A.asp" ></iframe>
    <iframe name="B" width="100%" height="33" frameborder="0" scrolling="no" src="B.asp" ></iframe>
    <iframe name="C" width="100%" height="100%" frameborder="0" scrolling="auto" src="C.asp" ></iframe>
    </body>


    I cannot seem to get my height in frame C to work like it did with the traditional frameset where it would autofit to the size of the browser window.  Are there solutions to this?
    Thanks,
    Jon

    Good Question?
    0
     

    ?

    The member who asked this question verified this comment provided the solution that solved their problem.

    Accepted Solution on 2006-03-01 at 14:52:06ID: 16080163

    How about this:

    <body style="border:0; margin:0;">
    <iframe name="A" width="100%" height="74" frameborder="0" scrolling="no" src="A.asp" ></iframe>
    <iframe name="B" width="100%" height="33" frameborder="0" scrolling="no" src="B.asp" ></iframe>
    <iframe name="C" width="100%" height="100%" frameborder="0" scrolling="auto" src="C.asp" ></iframe>
    <script>
    var fC = window.frames.C.frameElement;
    window.onresize=function(){
     fC.style.height=document.body.clientHeight-107;
    }
    window.onresize();
    </script>
    </body>

    Top Expert Contributor

    Essential articles and videos from the Experts

    More valuable questions with Expert answers

    201511-LO-Qu-074

    Extend your technology team with the Experts Exchange community.

    — trusted by —

    Who answers my questions?Our community has technology experts around the world.

    Julian Hansen

    4

    Articles

    2,663

    Solutions

    Expert in:

    • JavaScript
    • PHP
    • jQuery
    • CSS
    • HTML

    Alexandre Simões

    6

    Articles

    1,017

    Solutions

    Expert in:

    • .NET Programming
    • C#
    • JavaScript
    • Visual Basic.NET
    • ASP.NET

    Slick812

    1,899

    Solutions

    Expert in:

    • Delphi
    • PHP
    • JavaScript
    • AJAX
    • CSS

    Murfur

    151

    Solutions

    Expert in:

    • JavaScript
    • PHP

    Robert Schutt

    1,242

    Solutions

    Expert in:

    • JavaScript
    • .NET Programming
    • Visual Basic.NET
    • ASP.NET
    • C#

    Scott Fell

    1

    Articles

    3,580

    Solutions

    Expert in:

    • ASP
    • HTML
    • Web Development
    • CSS
    • JavaScript

    zephyr_hex

    2,543

    Solutions

    Expert in:

    • MS SharePoint
    • MS SQL Server 2005
    • Microsoft IIS Web Server
    • Windows 2003 Server
    • Windows XP

    leakim971

    1

    Articles

    8,116

    Solutions

    Expert in:

    • JavaScript
    • jQuery
    • AJAX
    • ASP.NET
    • HTML

    dgrafx

    663

    Solutions

    Expert in:

    • Web Servers
    • ColdFusion Language
    • Web Dev Software
    • JavaScript
    • Web Development

    RELATED TOPICS view all topics

    1. HTML
      (56,060)
    2. jQuery
      (14,686)
    3. PHP
      (116,165)
    4. AJAX
      (11,837)
    5. Web Languages/Standards
      (39,424)
    6. ASP.NET
      (122,100)
    7. CSS
      (39,385)
    8. Web Development
      (72,057)
    9. Scripting Languages
      (25,832)
    10. JScript
      (6,856)