如何使< div>填充< td>高度 [英] How to make <div> fill <td> height in Firefox

问题描述

在这里，这个问题已经回答了IE和Chrome，但提出的解决方案似乎不工作Firefox 16，45，以及之间的所有版本。

基本上，建议的解决方案如下：

  table，th，td {border：1px solid black;}  

 < table> < tr> < td style =height：1px;> < div style =border：1px solid red; height：100％;>我想让单元格是完整的高度< / div> < / td> < td>该单元
比< br />第一单元< / td>更高< br / < / tr>< / table>  

td 到 1px 的 height c $ c> div 可以设置 height：100％。在Chrome和IE中， 100％被解释为单元格的高度，而在Firefox中，它似乎成为

在Firefox中运行上面的例子将直观地说明这一点...

$ b

解决方案

请尝试添加 code>< div> ，并更改 height：1px < td>

上的到高度：100％

适用于Firefox，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>我想让单元格是完整的高度< / div> < / td> < td>该单元
比< br />第一单元< / td>更高< br / < / tr>< / table>  

Over here, this question has been answered for IE and Chrome, but the proposed solution does not seem to work in Firefox 16, 45, and probably all versions in between.

Basically, the proposed solution is as follows:

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>

By setting the height of the td to 1px, the child div can set height:100%. In Chrome and IE the 100% is then interpreted as "the height of the cell", while in Firefox it seems to become the max height needed for the divs content.

Running the example above in Firefox will illustrate this intuitively...

So, I'm looking for a solution that -also- works in Firefox.

解决方案

Try adding display: table to your nested <div>, and change height: 1px to height: 100% on the parent <td>

Example that works in Firefox, IE and 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>

这篇关于如何使< div>填充< td>高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！