html - DIV 占父可变高度 TD(TABLE 单元格)或替代标记的 100%

Question

问题似乎很“普遍”，但在我看到的大量讨论中，我没有找到可接受的解决方案，也没有充分理由说明根据“标准”这根本不可能。

问题陈述是

• HTML 中有一个 block ，我可以控制其外部尺寸 - 宽度和高度
• 在这个 block 中，我有第一行，内容的高度可变，我需要这个内容完全可见(即自动调整大小而不滚动或剪裁)...
• ...和第二行 - 它应该完全占用父 block 中的剩余空间并且可以滚动溢出。

我记得它在前一段时间工作(当将第一个 TR 设置为 1px 时，它实际上会精确扩展到适合内容所需的高度，第二个 TR 占用其余高度)，但试图现在在当前的主流浏览器中测试它，我发现它只在 Chrome 中有效。

所以问题是 - 是否可以在 HTML5/CSS3/跨浏览器标准(有或没有 TABLE)中实现布局。正如您在屏幕截图中看到的那样，FF 和 IE 都无法“正确”(即如我所料)控制具有“红色”背景的嵌入式 DIV 的高度。

下面是屏幕截图和jsfiddle对于这个问题。

和示例 HTML

<div style="width: 200px; height: 200px;">
    <table style="height: 100%; border: 1px solid blue;">
        <tr>
            <td style="height: 1px; background: green; border: 1px solid magenta;">
                Variable Number<br/>
                Of Lines<br/>
                All should be visible<br/>
            </td>
        </tr>
        <tr>
            <td style="border: 1px solid magenta;">
                <div id="subject" style="height: 100%; background: red; overflow-x: hidden; overflow-y: auto">
                    Variable<br/>
                    Number<br/>
                    Of Lines<br/>
                    Overflowing <br/>
                    lines<br/>
                    Can be scrolled<br/>
                    ...<br/>
                    Variable<br/>
                    Number<br/>
                    Of Lines<br/>
                    Overflowing <br/>
                    lines<br/>
                    Can be scrolled<br/>
                    ...<br/>
                </div>
            </td>
        </tr>
    </table>
</div>

Answer 1

然而，试图找到“让它发挥作用”的方法，我不得不提出以下问题，这似乎是间接但密切相关的 - HTML <tr> tag and position:relative .说TR和TD元素不能相对定位

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

我想这意味着这些元素不能创建自己的 block ，因为否则在 TD 上设置“position: relative”后我将能够通过“position: absolute; top: 0; left; 0; right”绝对定位子 DIV :0；底部:0”。

...

不确定这如何与“标准”的另一部分共存......

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

block containers (such as inline-blocks, table-cells, and table-captions) ... establish new block formatting contexts for their contents.

...在我的理解中，'block formating context' 创建了一些容器，我可以在其中对单个子 DIV 设置以下样式“position:absolute；top:0；left；0；right:0；bottom:0”和它将占用父级的全部内容(在我的例子中是 TD)。这也行不通。我看不出这背后的原因(很可能是因为 TD 和 TR 都不是相对可定位的)。

...

最后一件事 - 关于高度规范中的 %-units 说 http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-ltlengthgt

A 'percentage' is relative to the computed value of the width or height of the containing block, but if that value is 'auto' the computed value for the percentage is also 'auto'.

... http://www.w3.org/TR/2002/WD-css3-box-20021024/#containing

The containing block of a normal-flow element or of a floating element is the content area of the nearest ancestor that is either a flow root or a block-level element.

在我的例子中——在 TD 上设置了一些固定高度后，子 DIV 上的 100% 仍然计算为整个表格高度的 100%，而不是 TD 高度。 FF 和 IE 中的错误？还是我误读了“标准”？ ...

...

该死的......那些虚拟标准让开发人员的生活变得如此艰难...... PS:我现在记忆起来 - “前一段时间”又回到了 IE5 和 IE6。当切换到“IE5 怪癖”模式时，这种情况在当前 IE 中的工作方式与当前 Chrome 相同。现在，有了虚拟“标准”，我必须找到解决人为引入问题的方法......

---

总结:在白天挖掘并尝试解决问题后，我不得不承认 - 这不可能以“标准”方式实现。我将不得不求助于 JavaScript(这会导致一定程度的滞后和闪烁 :()。