如何使<div>填充<td>高度

Question

这个问题的答案需要更新,因为浏览器已经改变

---

原始问题

我已经浏览了StackOverflow上的几篇帖子,但未能找到这个相当简单的问题的答案.

我有一个像这样的HTML结构:

<table>
  <tr>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
  </tr>
</table>

我需要的是div填充的高度td,所以我可以将div的背景(图标)定位在右下角td.

你怎么建议我去那？

Answer 1

如果你给你的TD高度为1px,那么子div将有一个高亮的父级来计算它的%.因为你的内容会比1px大,所以td会自动增长,就像div一样.有点垃圾黑客,但我打赌它会起作用.

Answer 2

CSS高度:100%仅在元素的父级具有明确定义的高度时才有效.例如,这将按预期工作:

td {
    height: 200px;
}

td div {
    /* div will now take up full 200px of parent's height */
    height: 100%;
}

由于您的<td>高度似乎是可变的,如果您添加了带有绝对定位图像的右下角图标,如下所示:

.thatSetsABackgroundWithAnIcon {
    /* Makes the <div> a coordinate map for the icon */
    position: relative;

    /* Takes the full height of its parent <td>.  For this to work, the <td>
       must have an explicit height set. */
    height: 100%;
}

.thatSetsABackgroundWithAnIcon .theIcon {        
    position: absolute;
    bottom: 0;
    right: 0;
}

使用表格单元格标记如下:

<td class="thatSetsABackground">  
  <div class="thatSetsABackgroundWithAnIcon">    
    <dl>
      <dt>yada
      </dt>
      <dd>yada
      </dd>
    </dl>
    <img class="theIcon" src="foo-icon.png" alt="foo!"/>
  </div>
</td>

编辑:使用jQuery设置di​​v的高度

如果你保持<div>作为孩子<td>,这个jQuery片段将正确设置其高度:

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
    var $div = $(this);

    // Set the div's height to its parent td's height
    $div.height($div.closest('td').height());
});

Answer 3

你可以尝试让你的div浮动:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

或者,使用内联块:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

内联块方法的工作示例:

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <div style="border:1px solid red; height:100%; display:inline-block;">
        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>