垂直放置在表格单元 - IE8内 [英] streching div vertically inside a table-cell - IE8
问题描述
如何在表格单元格内垂直拉伸DIV？
我认为 height：100％会很好
但在某些情况下 - 它不是（至少在IE8中）
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)
这里是一个简单的例子：
a 3行表，头部，内容和页脚;
我希望'content'单元格中的'content'DIV垂直伸展100％;
它在FF和Chrome，但不是在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>
任何人都可以建议解决这个简单的问题？
它必须工作在IE8，FF任何Chrome（IE7和更旧的不重要）
它必须是基于CSS（无javascript）
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)
请不要建议像不要使用表格布局的智慧，因为我可以使用DIVs与 display：table 等等 - 问题是（我在示例中使用TABLE，TR，TD，因为它更容易读取）
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)
推荐答案
do在td上设置硬/固定高度，在td中的div上设置高度为100％。
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.
这篇关于垂直放置在表格单元 - IE8内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
