2

When I place a textarea inside a table cell...

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

...and I take extra care to make sure that both the textarea and the containing div have an important height of 100%... the textarea indeed covers all the cell's height under Chrome, but not under Firefox.

Any idea why and/or how to fix the situation under Firefox?

4

1 回答 1

2

Mozilla 做的非常正确！您将 textarea 的高度指定为其父级的 100%。它的父级 (div) 是其父级 (td) 高度的 100%。Td 高度未定义，因此它不能延伸到整个高度。[有人可能认为 td 的高度 = 桌子的高度，但这个假设并不完全正确] 要修复它，您必须将 100% 的高度指定为这样：

<td style="height:100%">

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

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

于 2013-10-07T14:54:15.507 回答