html - 在表格单元格中使 div 高度为 100%

<分区>

当行在另一个单元格中被换行拉伸(stretch)时，如何使单元格表格内的 div 高度为 100%。

在此Fiddle我想让第二个单元格中的 div 填充整个单元格(高度的 100%)。

td {
  border: 1px solid red;
  width: 50%;
  background-color: yellow;
}
td div {
  background-color: green;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<table>
  <tr>
    <td>
      <div>
        abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde
      </div>
    </td>
    <td>
      <div>
        xxx
      </div>
    </td>
  </tr>
</table>

最佳答案

如果你只需要背景颜色覆盖整个单元格，你可以只设置在td而不是div。

td:last-child {
  background-color: green;
}

如果你真的需要让 div 覆盖单元格，你可以尝试使用 position 技巧。请注意，此方法仅在第二个单元格中的数据较少时才有效。

td {
  position: relative;
}
td:last-child div {
  background-color: green;
  width:100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

jsFiddle

关于html - 在表格单元格中使 div 高度为 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38234931/

上一篇：javascript - 方向 rtl 到所有页面

下一篇：php - 在 codeigniter 中设置基本 url

asp.net - 如何在不使用 ul li 或 navbar 的情况下在 bootstrap 中水平居中全长 div

HTML + CSS : table with scrollbar if we have a long text

javascript - 为什么 React 说不要在 <option> 元素上设置 'selected' 属性？

javascript - 悬停时显示图像 Alt 属性文本

Javascript 改变 div 的颜色，然后改变 div 焦点的颜色

javascript - 按字母数量对单词进行排序，然后整齐地放置单词

javascript - 使用Javascript控制表格单元格的内部文本

jquery - 在 html 表格中的第一行之后追加行

JavaScript 未在 HTML 中运行