如何使<div>在火狐中填充<td>高度
如何使<div>在火狐中填充<td>高度
提问于 2016-04-12 14:12:40
Over here，这个问题已经在IE和Chrome上得到了回答，但是所提出的解决方案似乎并不适用于火狐16，45，可能所有版本之间。
基本上，建议的解决办法如下：
table,th,td {
border: 1px solid black;
}<table>
<tr>
<td style="height:1px;">
<div style="border:1px solid red; height:100%;">
I want cell to be the full height
</div>
</td>
<td>
This cell
<br/>is higher
<br/>than the
<br/>first one
</td>
</tr>
</table>
通过将height的td设置为1px，子div可以设置height:100%。在Chrome和IE中，100%被解释为“单元格的高度”，而在火狐中，它似乎成为div内容所需的最大高度。
在Firefox中运行上面的示例将直观地说明这一点。
因此，我正在寻找一个在Firefox中同样有效的解决方案。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-12 14:20:12
尝试将display: table添加到嵌套<div>中，并在父<td>上将height: 1px更改为height: 100%
适用于火狐、IE和Chrome的示例
table,
th,
td {
border: 1px solid black;
}
.fix_height {
height: 1px;
}
@-moz-document url-prefix() {
.fix_height {
height: 100%;
}
}<table>
<tr>
<td class="fix_height">
<div style="border:1px solid red; height:100%; display:inline-table">
I want cell to be the full height
</div>
</td>
<td>
This cell
<br/>is higher
<br/>than the
<br/>first one
</td>
</tr>
</table>
Stack Overflow用户
发布于 2016-04-12 14:34:44
尝试以下操作，它在Firefox.Just中工作，您必须用像素替换%以表示高度
table,th,td {
border: 1px solid black;
}<table>
<tr>
<td style="height:1px;">
<div style="border:1px solid red; height:100px;">
I want cell to be the full height
</div>
</td>
<td>
This cell
<br/>is higher
<br/>than the
<br/>first one
</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36575846
复制相关文章
相似问题
腾讯云开发者
