Question

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

问题陈述是

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

我记得它在一段时间以前工作了（当设置第一个TR到1px时，它实际上被精确地扩展到适合内容所需的高度，第二个TR需要剩余的高度），但是试图现在在当前的主流浏览器中进行测试我认为它仅适用于Chrome。

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

以下是此问题的屏幕截图和jsfiddle。

Screenshot for the problem

示例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

'position：relative'对table-row-group，table-header-group，table-footer-group， table-row ，table-column-group，table-column的影响， table-cell ，表格标题元素未定义。

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

...

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

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

阻止容器（例如内联块，表格单元格和表格标题）...为其内容建立新的块格式化上下文。

...在我的理解中，'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

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

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

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

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

...

该死的......那些虚拟标准让开发人员的生活如此艰难...... PS：我现在回想起 - “前段时间”又回到了IE5和IE6。当切换到“IE5怪癖”模式时，该情况在当前IE中与当前Chrome相同。现在，通过虚拟“标准”，我将找到人工引入问题的解决方法......

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

DIV采用100％的父可变高度TD（TABLE单元格）或替代标记

1 个答案: