如何将表格单元格内的空div的高度设置为该单元格的高度答案

【问题标题】：How to set height of empty div inside table cell to height of that cell如何将表格单元格内的空div的高度设置为该单元格的高度
【发布时间】：2013-08-29 16:07:51
【问题描述】：

我有一个表格单元格，

<td>
   <div style="position:relative;height:100%;width:100%">   
     <div class="drag-row"   
          style="position:absolute;height:3px;width:100%;left:0px;top:100%;">
      </div>
      TEXT
   </div>
</td>

如果 td 高度为 100px，TEXT 位于表格单元格的垂直中心，其父 div 的高度与 TEXT 相同，后跟div 类 drag-row。但我希望父 div 的高度与 td 的高度匹配，然后是 drag-row 类的 div （所以这个 div 应该出现在表格单元格的下边框）

如果我使用 javascript 将父 div 的高度设置为 td 的高度，它可能会起作用，但在这种情况下，如果稍后更新该单元格的高度，我的 div 不会在脚本运行时更新其高度。所以我想用css来做。谢谢。

这个解释可能会令人困惑，所以我的实际问题是，我希望drag-row div 位于表格单元格的底部。

【问题讨论】：

@Mr_Green 简而言之，我希望我的drag-row div 位于表格单元格的底部。
设置 top:100px 而不是 100%
我也很困惑你想要什么......如果你只想要单元格底部的drag-row div，请将bottom:0; 添加到它。如果它与文本重叠，只需在表格单元格中添加一个 margin:XXpx;（其中 XXpx = drag-row 的高度）。
@jegesh 我只是举例说 td-height = 100px。我不能将顶部设置为绝对值，因为我的表格单元格高度可能会在以后发生变化。所以我只需要百分比最高
首先，你的html布局不好。你应该有两个不同的 div 而不是嵌套的 div。

标签： javascript html css

【解决方案1】：

使用bottom:0 代替top:100%。那么div 的底部将始终匹配父元素的底部。

【讨论】：