html - 表格单元格内的文本区域不会在 Firefox 下调整为单元格高度

Question

当我在表格单元格内放置一个文本区域时...

<table style="height:200px">
    <tr>
        <td>Some<br>nifty<br>text<br>filler</td>
        <td style="padding:0px">
            <div style="height:100% !important">
                <textarea style="resize:none; height:100% !important; width:100% !important" data-ng-model="modelLogin.inpMtext">
            </div>
        </td>
    </tr>
</table>

...我特别注意确保 textarea 和包含的 div 都具有 100% 的重要高度...textarea 在 Chrome 下确实覆盖了所有单元格的高度，但在 Firefox 下则没有。

知道为什么和/或如何解决 Firefox 下的问题吗？

Answer 1

Mozilla 做得非常好!您将文本区域的高度指定为其父项的 100%。它的父级 (div) 是其父级 (td) 高度的 100%。 Td 高度是未定义的，所以它不能拉伸(stretch)到脚的整个高度。 [有人可能认为 td 的高度 = table 的高度，但这个假设不太正确]要修复它，您必须像这样分配 100% 高度:

<td style="height:100%">

规则很简单:如果您以百分比应用宽度/高度/边距，请确保您的浏览器有一个基准来计算它(每个父级直到最终高度都必须有它的高度)。

如果没有帮助，将 display:block 添加到 textarea(不太确定是否真的需要)并且......你可以删除这些讨厌的内联样式与多个 !importants :-)