这是我当前的代码：
table{
table-layout: fixed;
}
table tr td{
height: 100%;
}
table tr td div{
height: 100%;
background: red;
}<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div>Test</div></td>
<td>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</td>
<td> </td>
</tr>
</tbody>
</table>如您所见，红色div不会占用父td的 100%。我无法为父级设置固定尺寸，因为它们应该根据内容自动调整。
如何将div高度设置为与父高度td高度相似的 100%？
这应该适合您：
table{
table-layout: fixed;
height:100%;
}
table tr td div{
height: 100%;
background: red;
top:0;
}<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div>Test</div></td>
<td>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</td>
<td> </td>
</tr>
</tbody>
</table>
在 table tr td div 中添加以下样式案例。您的div 高度将像父 td 一样为 100%。
table tr td div{
height: 100%;
background: red;
display: inline-block;/* NEWLY ADDED */
width: 100%;/* NEWLY ADDED */
}
请使用
以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table{
table-layout: fixed;
}
table tr td{
height: 100%;
}
table tr td div{
height: 100%;
background: red;
display: inline-block;/* NEWLY ADDED */
width: 100%;/* NEWLY ADDED */
}
</style>
</head>
<body>
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div>Test</div></td>
<td>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>