views:

293

answers:

5

I am trying to construct a simple, one-column layout. I want the top two rows to have smaller, fixed heights. The third row should expand to fill the rest of the page. Here is my current source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
    <style type="text/css">
        html, body
        {
            height:100%;
            width:100%;
            border:0px;
            margin:0px;
        }
    </style>
</head>
<body>
    <table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
    <tr>
        <td style="height:50px;background:red;">Header 1</td>
    </tr>
    <tr>
        <td style="height:10px;background:blue;">Header 2</td>
    </tr>
    <tr>
        <td style="background:green;">Content</td>
    </tr>
    </table>
</body>
</html>

This works wonderfully in Safari, Firefox, and Opera. However, it fails miserable in both IE6 and IE7. In these two browsers, the first two rows are rendered much bigger than their specified heights. Not only that, but they actually dynamically resize with the height of the browser window. It's like IE is converting the constant pixel height to a percentage height.

It is important to me that the browser window not display scrollbars unless the content of the third row is big enough to require it. Setting the height of the 3rd <td> to 100% will cause these scrollbars to always appear since the height of that row will actually be set equal to the height of the entire table (it will be 100% of its containing element).

Removing the doctype declaration and reverting to quirks mode seems to make the issue go away in IE, but I need to use HTML 4.01 transitional as that is what all of the other existing pages in this application expect.

A: 

Here is an article for you that tells you how this can be done. I just tested the example that they provided in IE 6 and it works.

It appears that you must use the height property of the table, and NOT do it via a style attribute.

Mitchel Sellers
That is a slightly different layout than mine. I am able to expand the entire table just fine. But adding rows to the table and trying to get just the last row to expand is where I am having problems.
Sebastian Celis
A: 

How about adding position:fixed to the table? I tested it in IE8 and seemed to work.

Kevin Laity
That doesn't appear to make any difference in IE7.
Sebastian Celis
A: 

If you're using this to layout a page why not use divs instead?

This sort of works:

.outer {position:relative; height:100%; width:500px;background-color:blue;}
.top {height:30px;background-color:red;width:100%}
.middle {height:30px;background-color:green;width:100%}

<div class="outer">
<div class="top">
content1
</div>
<div class="middle">
content2</div>
content3
</div>
wheresrhys
A: 

Set the height of your last td to 100%:

    <tr>
        <td style="background:green;height:100%;">Content</td>
    </tr>
knut
That doesn't work. Setting a td to have a height of 100% causes that cell to have the same height as the table where it is defined. Thus, since the table itself is 100% of the body, the td will also be 100% of the body, thus causing the window to scroll.
Sebastian Celis
Think about it. What happens if the last cell gets the same height as the table? How would the table then display the first two cells? There would be no room for them. Have you tried my solution? It works.
knut
Yes, I have tried your solution. In fact, my question explicitly states that this solution does not work in IE6 or IE7.
Sebastian Celis
A: 

Does this work:?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <style type="text/css">
        html, body
        {
            height:100%;
            width:100%;
            border:0px;
            margin:0px;
        }
    </style>
</head>
<body>
    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td height="50" style="background:red;">Header 1</td>
    </tr>
    <tr>
        <td height="10" style="background:blue;">Header 2</td>
    </tr>
    <tr>
        <td style="background:green;">Content</td>
    </tr>
    </table>
</body>
</html>
Dr Casper Black