• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 31419
  • Last Modified:

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
0
mraible
Asked:
mraible
  • 10
  • 9
  • 3
  • +3
1 Solution
 
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





0
 
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 .
0
 
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>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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.
0
 
avnerCommented:
Have you tried using the dynamic properties ?
0
 
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.
0
 
avnerCommented:
Yes using dyanmic properties :

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




0
 
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!
0
 
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>
0
 
avnerCommented:
Seems to work on my IE 5.5
0
 
avnerCommented:
If it's not good enough, have you looked into frames ?
0
 
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.
0
 
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
0
 
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.
0
 
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">
0
 
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.
0
 
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...
0
 
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>
0
 
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}
0
 
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>
0
 
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.
0
 
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>



0
 
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.
0
 
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.
0
 
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?
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 10
  • 9
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now