100% height table in IE in standards mode

HTML & CSS
1

Can you make it work or is it only in quirks mode?


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
  height: 100%;
  margin: 0;
  padding: 0
}
table, #content {
  height: 100%;
  vertical-align: top
}
</style>
</head>
<body>
<table>
<tr>
  <td>Header</td>
</tr>
<tr>
  <td id="content">Content</td>
</tr>
<tr>
  <td>Footer</td>
</tr>
</table>
</body>
</html>
2

I just ran that code (in standards mode and in quirks) through IE6/7/Opera and all were similar in results? :slight_smile:
By results, I mean a 100% high content and the footer at the bottom of the page

3

Really? IE7 and IE8 were showing the middle cell at the full 100% of the page.
Didn’t test in ie6.

So the table is bigger than 100%.

4

I got no scrollbars (the footer sat nicely at the bottom of the page)

Could you produce a screenshot? What simulator do you use to test IE6/7/8

5

Hi Mark,
I got the same results you did. However, If I remove the 100% height from the Content then IE8 will render the same as FF3.

We may be standing on shaky ground here though. It is quite obvious where you are going with this. :slight_smile:

For the sake of testing , this works in IE8 and FF3 but not IE6/7. I set some heights on the header/footer though.


<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
table {
    height:100%;
    width:80%;
    margin:0 auto;
    border-collapse:collapse;
}
table td{
    vertical-align:top;
}
#header {
    height:80px;
    background:red;
}
#content {
   [COLOR=Red] /*height:100%; gives scrollbar in IE8*/[/COLOR]
    background:#CDF;
}
#footer {
    height:50px;
    background:lime;
}
</style>
</head>
<body>
<table>
    <tr>
      <td id="header">Header</td>
    </tr>
    <tr>
      <td id="content">Content</td>
    </tr>
    <tr>
      <td id="footer">Footer</td>
    </tr>
</table>
</body>
</html>
6

Thanks Ray,

I did try making the header and footer cells have height: 0; and the middle cell have height: auto; but it didn’t like that much.
I tried quite a few different combinations and just couldn’t get it to look right in standards mode.

problem solved.