使一个DIV填满整个表格单元格

由于我的声望不够高，无法发布评论，因此我想提供一个完整的跨浏览器解决方案，结合了@Madeorsk和@Saadat的方法，稍加修改！（截至2020年2月10日，在Chrome、Firefox、Safari、IE和Edge上进行了测试）

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

然而，如果你和我一样，想要控制垂直对齐方式，那么我建议使用flexbox：

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

好的，没有人提到这个，所以我想我会发布这个技巧：

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

在单元格内的容器div上使用overflow:auto就可以解决问题。如果没有它，div将无法使用整个高度。

这个技巧对我很有用：只需在div中加入一个空格（然后它将占据整个td的高度）。

<td>
   <div>
     &nbsp;
     <!-- some optional content filled by vuejs, angular or what you want -->
   </div>
</td>

我经常遇到类似的问题，总是在 table 元素上使用 table-layout: fixed;，在内部 div 上使用 height: 100%;。

如果定位元素及其父元素没有宽度和高度，则设置

padding: 0;

在其父元素中，

为了使内部div的高度:100%生效，您必须为父td设置一个高度。对于我的特定情况，使用height:100%可以实现这一点。这使得内部div的高度拉伸，而表格的其他元素不会使td变得太大。当然，您也可以使用其他值而不是100%。
如果您还想使表格单元格具有固定高度，以便它不会根据内容变大（使内部div滚动或隐藏溢出），那么这时您别无选择，只能使用一些js技巧。父td将需要使用非相对单位（不是%）指定高度。并且您很可能别无选择，只能使用js计算该高度。这还需要为表格元素设置table-layout:fixed样式。

最终我发现除了使用jQuery之外，没有任何东西可以在所有浏览器和所有DocTypes / 浏览器渲染模式下工作。所以这就是我想出来的方法。
它甚至考虑了rowspan。

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

在IE11（Edge模式），FF42和Chrome44+中进行了测试。未测试嵌套表格。

如果表格单元格的大小符合您的要求，只需添加此CSS类并将其分配给您的div：

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

如果您想让表格单元格也填满父容器，请将该类分配给表格单元格。

你可以这样做：

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

有点晚了，但这是我的解决方案：

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>