streching div vertically inside a table-cell - IE8

Question

how to stretch a DIV vertically inside a table-cell?
I thought height: 100% would be fine
but in some situations - it isn't (at least in IE8)

here is a simple example:
a 3-row table, with a header, a content, and a footer;
I would like the 'content' DIV inside the 'content' cell to stretch 100% vertically; it does in FF and Chrome, but not in IE8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
    <table style="height: 100%; width: 100%;">
        <tr style="background-color: blue;">
            <td>
                <div>header</div>
            </td>
        </tr>
        <tr style="height: 100%;">
            <td style="background-color: yellow;">
                <div style="height: 100%; background-color: red; overflow-y: scroll;">
                    content
                </div>
            </td>
        </tr>
        <tr style="background-color: blue;">
            <td>
                <div>footer</div>
            </td>
        </tr>
    </table>
</div>

http://jsfiddle.net/mWMmy/14/

could anyone suggest a solution to this simple problem? it has to work in IE8, FF any Chrome (IE7 and older is not important)
and it has to be CSS-based (no javascript)

please, do not suggest wisdoms like 'dont use tables for layout', as I could use DIVs with display: table, etc. - the problem is the same (I used TABLE, TR, TD in the example because it is more readable this way)

OK, thats because you tried it in quirks mode... but I need standards mode (I edited the example, and added the doctype definition) — slobo, Apr 10 '11 at 14:54

Jason · Answer 1 · 2012-07-12T21:17:37.287

0

All you need to do is put a hard/fixed height on the td and a height of 100% on the div in the td.

edited Jul 12 '12 at 21:17

answered Jul 12 '12 at 21:05

Jason

1
1

score 0 · Answer 2 · answered Apr 10 '11 at 15:16

you can remove the div content from middle td and make style to middle td to be scrolled

like that

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
    <table style="height: 100%; width: 100%;">
        <tr style="background-color: blue;">
            <td>
                <div>header</div>
            </td>
        </tr>
        <tr style="height: 100%;">
            <td style="background-color:yellow;overflow-y:scroll;vertical-align:top;">
                content
            </td>
        </tr>
        <tr style="background-color: blue;">
            <td>
                <div>footer</div>
            </td>
        </tr>
    </table>
</div>

and that for your question but the total height is the height for the parent div as you set to height: 20em;

so if you want to make an application to fill browser client with autoheight you have only two ways

1- Using Frameset like that

<frameset ROWS="100px,*,100px">
  <frame src="header.htm" />
  <frame src="content.htm" />
  <frame src="footer.htm" />
</frameset>

that will make auto height without javascript,

2- Using Javascript

My Regards

2. as I have written in my question, I would like a CSS-only (no javascript) solution — slobo, Apr 10 '11 at 16:58
1. you may have misunderstood my question, I do not want to fill the browser window — slobo, Apr 10 '11 at 17:03
as I have written in my question, I would like to stretch the DIV vertically inside the table cell. I would not like to remove the DIV. — slobo, Apr 10 '11 at 17:05
sorry i have tried to do my best to help you, but for experience i tried before to do that and nothing, so suggest that ... any way i will try again — Mhmd, Apr 10 '11 at 23:30

streching div vertically inside a table-cell - IE8

2 Answers2

Linked