在表格单元格内垂直拉伸 div - IE8答案

【问题标题】：streching div vertically inside a table-cell - IE8在表格单元格内垂直拉伸 div - IE8
【发布时间】：2012-07-13 05:17:37
【问题描述】：

如何在表格单元格内垂直拉伸 DIV？
我以为height: 100% 会很好
但在某些情况下 - 它不是（至少在 IE8 中）

这是一个简单的例子：
一个包含页眉、内容和页脚的 3 行表格；
我希望“内容”单元格内的“内容”DIV 垂直拉伸 100%；它在 FF 和 Chrome 中可以，但在 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/

任何人都可以提出解决这个简单问题的方法吗？它必须在 IE8、FF 任何 Chrome 中工作（IE7 和更早版本并不重要）
它必须是基于 CSS 的（没有 javascript）

请不要建议像“不要使用表格进行布局”这样的智慧，因为我可以使用带有display: table 的 DIV 等 - 问题是一样的（我在示例中使用了 TABLE、TR、TD，因为它是这种方式更具可读性）

【问题讨论】：

您的示例代码在 IE8 中似乎运行良好。
好的，那是因为你在怪癖模式下尝试过......但我需要标准模式（我编辑了示例，并添加了 doctype 定义）

标签： css internet-explorer-8

【解决方案1】：

您可以从中间 td 中删除 div 内容并使样式为中间 td 以进行滚动

这样

<!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>

对于您的问题，但总高度是您设置为 height: 20em; 时父 div 的高度；

所以如果你想制作一个应用程序来用自动高度填充浏览器客户端你只有两种方式

1- 像这样使用框架集

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

这将在没有 javascript 的情况下实现自动高度，

2- 使用 Javascript

我的问候

【讨论】：

2.正如我在问题中所写，我想要一个纯 CSS（无 javascript）的解决方案
1.你可能误解了我的问题，我不想填满浏览器窗口
正如我在问题中所写，我想在表格单元格内垂直拉伸 DIV。我不想删除 DIV。
对不起，我已经尽力帮助你了，但是我之前尝试过这样做但没有任何经验，所以建议......无论如何我会再试一次

【解决方案2】：

您需要做的就是在 td 上放置一个硬/固定高度，在 td 中的 div 上放置一个 100% 的高度。

【讨论】：