views:

1274

answers:

4

I want display a header with arbitrary content above an iframe that takes up the rest of the screen. I have managed to get this working with tables using the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<style>
html, body, iframe, table, tr, td {
  margin: 0; padding: 0;
}
html, body, iframe, table, #content {
  height: 100%; width: 100%;
}
table {
  border-collapse: collapse;
}
iframe {
  border: 0;
}
</style>
</head>
<body>
  <table>
    <tr><td>
      <div id="header">
        <p>some arbitrary stuff in a header</p>
        <p>this is sized dynamically</p>
        <p>it's not a fixed size</p>
      </div>
    </td></tr>
    <tr><td id="content">
      <iframe src="http://www.bing.com/search?q=stackoverflow" />
    </td></tr>
  </table>
</body>
</html>

That works in Firefox and Chrome, but not IE7 (I don't know why). Without using tables, this is the closest I could get:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<style>
html, body {
  margin: 0; padding: 0;
  height: 100%;
}
iframe {
  margin: 0; padding: 0;
  width: 100%;
  border: 0;
}
</style>
</head>
<body>
  <div id="header">
    <p>some arbitrary stuff in a header</p>
    <p>this is sized dynamically</p>
    <p>it's not a fixed size</p>
  </div>
  <iframe src="http://www.bing.com/search?q=stackoverflow" />
</body>
</html>

This looks the same in all browsers, but the iframe is too short. If I set its height to 100% though, it grows as big as the screen and 2 scrollbars appear (the same as IE7 in the table version). I want the iframe to take up whatever space is left in the browser window, but not more. I would rather not have to resort to Javascript.

A: 

This looks like what you need. Look at the sourcecode for more information.

Javache
That doesn't work. Put the iframe in the content with nothing else and you end up with a small strip of iframe at the top of the browser.
dmnd
A: 

Why not just use old fashion, regular frames then? The point of an iFrame is that it doesn't expand beyond what a normal element would.

Ken
I need the top frame to dynamically resize to fit the content inside it.
dmnd
A: 

Try using the following javascript function

<script language="javascript">
function adjust_iframe(oFrame)
{
    if(!oFrame) return;

    var win_height;
    var frm_height;  

    // Get page height Firefox/IE
    if(window.innerHeight) win_height = window.innerHeight;
 else if(document.body.clientHeight) win_height = document.body.clientHeight; 

    // Dtermine new height
    frm_height = win_height - oFrame.offsetTop - 15; // replace 15 accordingly

    // Set iframe height
    oFrame.style.height = frm_height + "px";
}
</script>

Note that you will have to call it at some point (E.g. Onload), like:

<body onload="adjust_iframe(document.getElementById('myiframe'));">
Amir E. Habib
I have something similar implemented at the moment. But the point of the question is to do it without javascript.
dmnd
+1  A: 

I don't think the CSS box model has the concept of available vertical space.

Neil