Question

相关问题是this one，但它并没有真正帮助，因为我无法明确设置任何内容的高度，所有内容都有可变的用户定义内容，可以是一行高或5行高。

如果有一个表（内联CSS仅用于演示），就会卡在这一个上：

<table border=1>
    <tr>
        <td valign="top">
            <table>
                <tr>
                    <td style="background:red">
                        Something here<br />
                        More
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="border:1px solid green">This needs to be 100% remaining height</div>
                    </td>
                </tr>
            </table>
        </td>
        <td style="background:blue">
            Blah<br />
            Blah<br />
            Blah<br />
            Blah<br />
            Blah<br />
            Variable<br />
            Number<br />
            Of lines!
        </td>
    </tr>
</table>

我需要将div扩展到包含div的100％高度，因此它与blah blah blah列的总高度相匹配（为此我假设父td首先需要展开以填充剩余高度）。

我在这里有一个JSFiddle：

http://jsfiddle.net/WZC35/1/

显示我的意思更清楚。

我可以使用Jquery，但更愿意使用CSS解决方案。 我知道使用表格是有问题的但这是一个Jquery插件以相当复杂的布局呈现数据，表格提供了最好的支持解决方案并解决了很多对齐问题，如果你想看到在此背景下，请看这个链接：

http://69.24.73.172/demos/eventml/default.htm

我正在尝试使大紫色紫色盒子与右手栏的高度相匹配。

Answer 1

在看了你的链接后，我认为你可以使用完美的rowspan而不是嵌套表（比如说PJP）。然后你可以将所需的CSS装饰（紫色背景）与td相关联，而不是与div相关联。如果需要，div只能包含文本。

    <table border=1>
    <tr>
        <td valign="top" style="background:red">
                        Something here<br />
                        More
        </td>
        <td style="background:blue" rowspan="2">
            Blah<br />
            Blah<br />
            Blah<br />
            Blah<br />
            Blah
        </td>
    </tr>
    <tr>
        <td style="border:1px solid green">
            <div >This needs to be 100% height</div>
        </td>
    </tr>
</table>

Answer 2

我不能说我喜欢这个标记。嵌套表是丑陋的，内联样式也有问题，但这似乎接近你想要的？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Something here More</title>
</head>

<body>

<table border="1">
<tr>
    <td valign="top" style="height: 100%">
    <table style="height:100%">
        <tr>
            <td style="background: red;">Something here<br />
            More </td>
        </tr>
        <tr style="height:100%">
            <td style="height:100%">
            <div style="border: 1px solid green; height:100%">
                This needs to be 100% remaining height</div>
            </td>
        </tr>
    </table>
    </td>
    <td style="background: blue">Blah<br />
    Blah<br />
    Blah<br />
    Blah<br />
    Blah<br />
    Variable<br />
    Number<br />
    Of lines! </td>
</tr>
</table>

</body>

划分100％高度

2 个答案: