100% height problem

Shawazi

Okay so I essentially have 3 divs.

#header
#body
#footer

header will ALWAYS be 60px
footer will ALWAYS be 20px

I would like body to fill 100% of the remaining space no matter what, with no scrollbars showing. Is this even possible? I had gotten it to work in FF and then saw IE7 was a no go. I did something conceptually like this

<div id="container">
<table>
<tr>
  <td><div id="header"</td>
</tr>
<tr>
  <td height=100%>
     <div id="body"></div>
  </td>
</tr>
<tr>
  <td valign="bottom"><div id="footer"></div></td>
</tr>
</table>
</div>

in CSS, the HTML, BODY, #body, and #container are set to 100% height

Shawazi

oh this works in Safari as well so what should i change for ie, or go about another way? The basic problem is that IE is treating the 100% TD in the table oddly. It actually makes the TR the height of the viewport so the table becomes the viewport + the other two TRS intead of the height of the viewport.

kardiostep

body style='overflow:hidden'. that will hide the scrollbars

benracer

This is a very common problem, see...
http://www.google.co.uk/search?hl=en&q=100%25+Height+IE&meta=