垂直放置在表格单元 - IE8内

本文介绍了垂直放置在表格单元 - 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)

IE8内

垂直放置在表格单元 - IE8内

问题描述

推荐答案