Solved

iframe auto height

Posted on 2006-03-01
1,488 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

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Suggested Solutions

    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    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…

    875 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

    8 Experts available now in Live!

    Get 1:1 Help Now