Solved

iframe auto height

Posted on 2006-03-01
1,487 Views
Last Modified: 2008-01-09
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
0
Question by:kerrj
    8 Comments
     
    LVL 23

    Expert Comment

    by:adilkhan
    use Tables..

    <table width=100% height=100%>

    <tr><td height=10%>
    <iframe name="A" width="100%" height="100%" frameborder="0" scrolling="no" src="A.asp" ></iframe>
    </td><tr>

    <tr><td height=10%>
    <iframe name="B" width="100%" height="100%" frameborder="0" scrolling="no" src="B.asp" ></iframe>
    </td><tr>

    <tr><td height=80%>
    <iframe name="C" width="100%" height="100%" frameborder="0" scrolling="auto" src="C.asp" ></iframe>

    </td><tr>
    </table>

    0
     

    Author Comment

    by:kerrj
    This did not seem to work for me the height of frame C still does not autosize to fit the bottom of the screen.  Also, I cannot have frames A and B as percentages, they must be exact heights.  I should also point out that I need this to work in IE, no other browsers need to work for this code.
    Thanks,
    Jon  
    0
     
    LVL 63

    Accepted Solution

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

    0
     

    Author Comment

    by:kerrj
    The content from C still runs past the bottom of the page and you end up with 2 scroll bars on the left.
    0
     

    Author Comment

    by:kerrj
    Sorry, I meant 2 scroll bars on the right.
    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    In my test I have the second most right scroll bar grayed out with the -107 pixel substraction.
    Try to subtract more then 107 pixel.
    But you CANNOT remove the right most main window scroll bar.

    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    Sorry, it was wrong statement "CANNOT"; you can :-)
    Like this:

    <body style="border:0; margin:0;"  scroll="no" >

    0
     
    LVL 2

    Expert Comment

    by:MqRy
    Zvonko have right

    But also you can remove iframes scrollbars too..
    And with some calculations differences, your iframe should seem as you wish in every browsers

    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

     Java Android Coding Bundle

    Whether you're an Apple user or Android addict, learning to code for the Android platform is an extremely valuable, in-demand skill. It all starts with Java, the language behind the apps and games that make Android the top platform it is today.

    A common challenge, or question, when working with two calendar dates is: What is the difference between the specified days? As is frequently the case, the answer is: It depends... What kind of difference do you want? Given two date obje…
    No!  Not that kind of date. :-)  That wasn't meant to be a pick up line. This article is about displaying dates in different formats regardless of the browser being used.  If you let the browser's JavaScript engine format a date object for you, t…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    690 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    32 Experts available now in Live!

    Get 1:1 Help Now