Question

如何在表格单元内垂直拉伸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，因为这种方式更具可读性）

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

和你的问题，但总高度是父div设置为高度时的高度：20em;

所以如果你想让应用程序用autoheight填充浏览器客户端你只有两种方式

1-像这样使用Frameset

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

将在没有javascript的情况下生成自动高度，

2-使用Javascript

我的问候

Answer 2

如果您的行数不超过您在标记中指定的行数，则此解决方案将起作用，您可以控制页眉和页脚行的高度。将位置：相对放在桌面上，FF，Chrome和IE都会将该元素识别为td中绝对定位div的容器。按标题的高度偏移div的顶部，依此类推。如果有一些表格边框或填充，您需要使用left，right，top和bottom属性进行更多补充。

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

Answer 3

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

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

3 个答案: