DIV 采用 100% 的父可变高度 TD（表格单元格）或替代标记答案

【问题标题】：DIV taking 100% of parent variable-height TD (TABLE cell) or alternative markupDIV 采用 100% 的父可变高度 TD（表格单元格）或替代标记
【发布时间】：2014-03-08 21:02:09
【问题描述】：

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

问题陈述是

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

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

所以问题是 - 是否可以在 HTML5/CSS3/跨浏览器标准中实现布局（有或没有表格）。正如您在屏幕截图中看到的那样，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>

【问题讨论】：

标签： html css

【解决方案1】：

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

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

'position:relative'对table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column的影响、table-cell 和 table-caption 元素是未定义。

我想这意味着这些元素不能创建自己的块，因为否则在 TD 上设置“位置：相对”后，我将能够通过“位置：绝对；顶部：0；左；0；右”来绝对定位子 DIV ：0；底部：0”。

...

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

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

块容器（例如 inline-blocks、table-cells 和 table-captions）...为其内容建立新的块格式化上下文。

...在我的理解中，'块格式化上下文'创建一些容器，我可以在单个子 DIV 上设置以下样式“位置：绝对；顶部：0；左侧；0；右侧：0；底部：0”和它将占用父级的全部内容（在我的情况下为 TD）。这也不起作用。我看不出这背后的原因（很可能是因为 TD 和 TR 都不是相对可定位的）。

...

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

“百分比”是相对于包含块的宽度或高度的计算值，但如果该值是“自动”，则计算的值百分比也是“自动”。

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

正常流元素或浮动元素的包含块是最近祖先的内容区域，它是流根或块级元素。

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

...

该死……那些愚蠢的标准让开发者的生活变得如此艰难…… PS：我现在回想一下——“前一段时间”又回到了 IE5 和 IE6。当切换到“IE5 quirks”模式时，这种情况在当前 IE 中的工作方式与当前 Chrome 相同。现在，使用虚拟“标准”，我必须为人为引入的问题找到解决方法......

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

【讨论】：