?
Solved

iFrame height - would like fluid design

Posted on 2003-03-25
25
Medium Priority
?
31,355 Views
Last Modified: 2012-06-22
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
Comment
Question by:mraible
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 9
  • 3
  • +3
25 Comments
 
LVL 10

Accepted Solution

by:
kollegov earned 1000 total points
ID: 8208295
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
 
LVL 14

Expert Comment

by:avner
ID: 8208601
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
 
LVL 1

Expert Comment

by:niteshn
ID: 8209214
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:mraible
ID: 8210617
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
 
LVL 14

Expert Comment

by:avner
ID: 8210637
Have you tried using the dynamic properties ?
0
 
LVL 1

Author Comment

by:mraible
ID: 8210685
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
 
LVL 14

Expert Comment

by:avner
ID: 8210713
Yes using dyanmic properties :

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




0
 
LVL 1

Author Comment

by:mraible
ID: 8210813
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
 
LVL 1

Author Comment

by:mraible
ID: 8210820
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
 
LVL 14

Expert Comment

by:avner
ID: 8210865
Seems to work on my IE 5.5
0
 
LVL 14

Expert Comment

by:avner
ID: 8210868
If it's not good enough, have you looked into frames ?
0
 
LVL 1

Author Comment

by:mraible
ID: 8211434
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
 
LVL 10

Expert Comment

by:kollegov
ID: 8215069
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
 
LVL 1

Author Comment

by:mraible
ID: 8217148
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
 
LVL 14

Expert Comment

by:avner
ID: 8217259
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
 
LVL 1

Author Comment

by:mraible
ID: 8217563
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
 
LVL 14

Expert Comment

by:avner
ID: 8217595
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
 
LVL 1

Author Comment

by:mraible
ID: 8217667
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
 
LVL 14

Expert Comment

by:avner
ID: 8217699
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
 
LVL 1

Author Comment

by:mraible
ID: 8217824
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
 
LVL 14

Expert Comment

by:avner
ID: 8217880
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
 
LVL 10

Expert Comment

by:kollegov
ID: 8222727
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
 
LVL 1

Author Comment

by:mraible
ID: 8222953
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
 

Expert Comment

by:n0ah
ID: 12340873
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
 
LVL 17

Expert Comment

by:ram_0218
ID: 21302491
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

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

764 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