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)
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
This solution will work if you have no more rows than what you specify in your markup, and you can control the height of the header and footer rows. Put position:relative on the table, and FF, Chrome, and IE will all recognize that element as the container for the absolutely positioned div within the td. Offset the top of the div by the height of your header, and so forth. If there is some table border or padding, you'll need to compenstate a little more with left, right, top and bottom properties.
<!DOCTYPE html">
<html>
<head>
</head>
<body>
<div style="overflow: auto; height: 20em; width: 20em;position:relative;">
<table style="height: 100%; width: 100%;" border=0;>
<tr style="background-color: blue;">
<td>
<div>header</div>
</td>
</tr>
<tr style="height: 100%;">
<td style="background-color: yellow;">
<div style="position:absolute;top:20px;bottom:20px;left:2px;right:2px;background-color: red; overflow-y: scroll;">
content
</div>
</td>
</tr>
<tr style="background-color: blue;">
<td>
<div>footer</div>
</td>
</tr>
</table>
</div>
</body>
</html>
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.
