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

问题描述

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

原来的问题

我看过 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 的 bottom-right 角上。

你怎么建议我去做那个？

最佳解决方案

如果你给你的 TD 的高度为 1px，那么子 div 将有一个高度的父代来计算它的％。因为你的内容会大于 1px，所以 td 会自动增长，和 div 一样。 Kinda 一个垃圾骇客，但我敢打赌它会工作。

次佳解决方案

CSS height：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 设置 div 的高度

如果您将<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());
});

第三种解决方案

你可以尝试使你的 div 浮动：

.thatSetsABackgroundWithAnIcon{

    float:left;
}

另外，使用 inline-block：

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

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>

第四种方案

这个问题已经回答了 here 。将 height: 100% 放在 div 和容器 td 中。

参考文献

How to make <div> fill <td> height

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。