iFrame height - would like fluid design

I have the following page that I'd like to make a fluid design - where the iframe in the <div id="content"> stretches to fit the unused part of the page.  There are a couple of divs above it - header and courseInfo - both of these are absolute positioned and their height is set in pixels.  The footer uses the same setup.

http://stage.onpointdigital.com/sandbox/new/index.html

I'd like to use CSS (not JavaScript) to set the iframe/content div to be the browser's height - header + courseInfo + footer height.

Target browsers/platforms:

Opera 6/7 Windows/Linux
IE 5 Mac
IE 5.5+ Windows
Mozilla 1.0+ All

Currently, I have a JavaScript function called adjustFrame() that does a calculation, but it's ugly and doesn't account for the browser being resized.  Also, in Opera, it expands the bottom of the iframe, but does not expand it to show all its contents.

Thanks,

Matt
LVL 1
mraibleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

kollegovCommented:
No luck with CSS...  CSS do not suppose any way to do size calculations dynamicaly ( exept fixed % )
What you can do is add    window.onresize=adjustFrame;

Or just use ordinary FRAMESET not IFRAME
With fixed size frames for header and footer parts
This must fit better in your design





Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
avnerCommented:
you can use dynamic properties for that, But I'm not sure which of the browsers will support it :
for example :
<iframe style="height:expression(body.offsetHeight)">

It will surley work for IE versions .
niteshnCommented:
Try setting the height in %. For eg. The following change in ur html doesn give identical results in IE/NS on windows

<div id="content" style="height:80%">
<iframe src="http://www.onpointdigital.com" id="contentFrame" name="contentFrame" title="Movie Screen" longdesc="Frame where course content appears." frameborder="0" style="height:100%">You browser does not support iframes - time to upgrade!</iframe>
</div>
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

mraibleAuthor Commented:
When I use percentages for the height on div#content, and 100% for the height on the iframe, I get strange behavior and the iframe goes way off the bottom of the page.

If I hard-code pixels for everthing it works fine, but then my content/iframe is not a "fluid" height, which is what I want.
avnerCommented:
Have you tried using the dynamic properties ?
mraibleAuthor Commented:
So what I'm trying to say is, is there anyway to have:

div#header {
  height: 75px;
}
div#content {
  height: everything else
}
div#footer {
  height: 15px;
}

I'd like to do absolute positioning, but I'm willing to sacrifice and use relative to get my height's correct.
avnerCommented:
Yes using dyanmic properties :

div#header {
 height: 75px;
}
div#content {
 height: expression(parseInt(document.body.offsetHeight)-(75+100))
}
div#footer {
 height: 15px;
}




mraibleAuthor Commented:
Dynamic properties does work fine in IE - but only with standards-compliant mode turned off.  I want to use XHTML, which means standards-compliant mode must be turned on.  And this does not work in any of the other browsers I mentioned, so it's not a viable solution for me.  Slick though!
mraibleAuthor Commented:
Here's a sample page to work with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
     <title>Test</title>
</head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div#header {
height: 75px;
background: #ffffcc;
}
div#content {
height: expression(parseInt(document.body.offsetHeight)-(75+22));
background: #ffcccc;
}
div#footer {
height: 15px;
background: #66cccc;
}
</style>
<body>
<div id="header">height: 75px;</div>
<div id="content">height: the rest</div>
<div id="footer">height: 15px</div>
</body>
</html>
avnerCommented:
Seems to work on my IE 5.5
avnerCommented:
If it's not good enough, have you looked into frames ?
mraibleAuthor Commented:
It doesn't work in Mozilla or Opera - that's the problem.  I suppose frames is an answer, but I'd rather use an iframe.
kollegovCommented:
Well, as I told above FRAMES fit better in your design, but requires some logical redesign
and probably frames content synchronisation...  

One more solution, just use table, without positioning :)
Table with 100% height and  with fixed heights for footer row and header row and non-specified height for content row

<body>
<table height="100%" border=1>
 <tr>
    <td height="100">
      header
    </td>
 </tr>
 <tr>
    <td>
      <iframe height="100%">
          Content
      </iframe>
    </td>
 </tr>
 <tr>
    <td height="100">
      footer
    </td>
 </tr>  

</body>

DO not have Mozilla and Opera to check but MIE5 and NN7
mraibleAuthor Commented:
The table thing works great in all browsers except Opera.  Also, when I turn on XHTML compliance mode - it doesn't in any of my target browsers.

I guess I can try going to frames - it just seems strange to me that this (fixed header/footer height, fluid content) is not possible.
avnerCommented:
mraible , kollegov's (briliant) solution with the Tabel should in all browsers, what is the problem you are facing there ?
You might want to try and set the TD height as CSS as the height attribute is deprectaed :
Instead of :
<td height="100">
use :

<td style="height:100px">
mraibleAuthor Commented:
I'm setting all my properties in CSS - and it DOES work, but not in standards-compliant mode (adding XHTML Doctype).  This is to say that it works, but it's a hack rather than proper code and it will likely break in future versions of the browsers.
avnerCommented:
mraible, If you will look into the support of different browsers and the XHTML doctype support, you'll notice that it is very buggy in all browsers (http://www.xs4all.nl/~ppk/js/)

What I suggest is that the code suggested is perfectly fine ! the problem is with the XHTML doctype that is lake support in the browsers...
mraibleAuthor Commented:
The code above does not work perfectly fine - it fails in Opera 7 even with standards-compliant mode (XHTML) turned off.

<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 0; padding: 0; overflow: hidden}
table#layout {height: 100%; width: 100%; padding: 0; border-collapse: collapse}
td#header {height: 75px; background: #ffd}
td#footer {height: 15px; background: #c0c0c0}
iframe#content {height: 100%; width: 100%; border-top: 1px solid black; border-left: 0; border-right: 0; border-bottom: 1px solid black}
</style>
</head>
<body>
<table id="layout">
<tr>
   <td id="header">
     header
   </td>
</tr>
<tr>
   <td>
     <iframe src="http://www.yahoo.com" id="content">
         Content
     </iframe>
   </td>
</tr>
<tr>
   <td id="footer">
     footer
   </td>
</tr>
</table>
</body>
</html>
avnerCommented:
What do you mean by :
"does not work perfectly fine "?
What is not working ?

Have you tried removing the default names space :
<html xmlns="http://www.w3.org/1999/xhtml">

to :
<html>



Also add "px" to all integers in the style sheet :


body { margin: 0; padding: 0; overflow: hidden}
to :
body { margin: 0px; padding: 0px; overflow: hidden}
mraibleAuthor Commented:
What is not working is that the iframe shows up and it's about 2 inches high, rather the "fluid".  This happens on all browsers in XHTML mode.  If I remove the XHTML doctype, it only happens in Opera 7/Windows.  I added body {height: 100%} and it fixed the 2-inches-high problem in Opera, but now the iframe goes way off the bottom of the page.

Here's my latest source:

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">-->
<html>
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <style type="text/css">
        body { margin: 0px; padding: 0px; overflow: hidden; height: 100%; width: 100%}
        table#layout {height: 100%; width: 100%; padding: 0px;}
        td#header {height: 75px; background: #ffd}
        td#footer {height: 15px; background: #c0c0c0}
        iframe#content {height: 100%; width: 100%; border-top: 1px solid black; border-left: 0px; border-right: 0px; border-bottom: 1px solid black}
        </style>
    </head>
<body>
<table id="layout">
<tr>
   <td id="header">
     header
   </td>
</tr>
<tr>
   <td>
     <iframe src="http://www.yahoo.com" id="content">
         Content
     </iframe>
   </td>
</tr>
<tr>
   <td id="footer">
     footer
   </td>
</tr>
</table>
</body>
</html>
avnerCommented:
Your only solution to that would be dynamically setting the table's height :
Try something like that :

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">-->
<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <style type="text/css">
       body { margin: 0px; padding: 0px; overflow: hidden; height: 100%; width: 100%}
       table#layout {height: 100%; width: 100%; padding: 0px;}
       td#header {height: 75px; background: #ffd}
       td#footer {height: 15px; background: #c0c0c0}
       iframe#content {height: 100%; width: 100%; border-top: 1px solid black; border-left: 0px; border-right: 0px; border-bottom: 1px solid black}
       </style>
        <script>
     function setTableHeight()
     {    
          var oTable = document.getElementById("layout");
          if (navigator.userAgent.indexOf("Opera 6")!=-1)
                    {
                         oTable.style.height="97%"; //or whatever needed
                    }
        }

        </script>
   </head>
<body onload="setTableHeight()">
<table id="layout">
<tr>
  <td id="header">
    header
  </td>
</tr>
<tr>
  <td>
    <iframe src="http://www.yahoo.com" id="content">
        Content
    </iframe>
  </td>
</tr>
<tr>
  <td id="footer">
    footer
  </td>
</tr>
</table>
</body>
</html>


Change the 97% to whatever you want it to be.
kollegovCommented:
Hmmmm... try this  
This work in NN7 and MIE5.5 OK with commented out doctype and do not produce 2 inch problem :))
Hopefully it will work in other browsers too
( Never had Opera installed, so can't check  )


<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

             <html xmlns="http://www.w3.org/1999/xhtml">
     
                 <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                    <style type="text/css">
                    body { margin: 0px; padding: 0px; overflow: hidden; height: 100%; width: 100%}
                    .layout {height: 100%; width: 100%; padding: 0px;}
                    .header {height: 75px; background: #ffd}
                    .footer {height: 15px; background: #c0c0c0}
                    iframe#content {height: 100%; width: 100%; border-top: 1px solid black; border-left: 0px; border-right: 0px; border-bottom: 1px solid black}
                    </style>
                </head>
             <body>
             <table class="layout">
             <tr class="header">
               <td class="header">
                 header
               </td>
             </tr>
             <tr>
               <td>
                 <iframe src="http://www.yahoo.com" id="content">
                     Content
                 </iframe>
               </td>
             </tr>
             <tr class="footer">
               <td class="footer">
                 footer
               </td>
             </tr>
             </table>
             </body>
             </html>



mraibleAuthor Commented:
Close, but no cigar with Opera.  I found that the only reasonable way to do this was with a frameset and frames.  Too bad the only way to get rid of the spacing between frames is with <frameset frameborder="0" (for Mozilla) and border="0" for Opera - both of which are not XHTML attributes for framesets.  Oh well, I guess it's more important that it works than that it validates.  Latest version at http://stage.onpointdigital.com/sandbox/new/frame.html - works pretty much the same in all the browsers I listed.  I have some alignment issues with buttons and such at the top, but that should be a bit simpler to fix.
n0ahCommented:
As far as I recall.. using xhtml strict you cannot use frames or iframes, they aren't supported, try using <object data="page.html"> instead, they are supported and work just as an iframe does.
ram_0218Commented:
dont know if anyone would follow this.. but if you've a DHTML inside iframe source that expands the height of some elements, will the css expression take care of resizing the main page?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.