2

这是我当前的代码：

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>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</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>&nbsp;</td>
    </tr>
  </tbody>
</table>

如您所见，红色div并没有占用 100% 的 parent td。我无法为父母设置固定尺寸，因为它们应该自动调整到内容。

如何将div高度设置为与父td高度一样的 100%？

4

3 回答 3

2

经过一些研究，我得到了这个解决方案:)希望这对你有用:)

table{
    table-layout: fixed;
    height:100%;
}


table tr td div{
    height: 100%;
    background: red;
    top:0;
}
<table width="200" border="1">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</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>&nbsp;</td>
    </tr>
  </tbody>
</table>

于 2017-05-15T10:28:37.337 回答
-1

在table tr td div. 您的 div 高度将与父 td 一样 100%。

table tr td div{
    height: 100%;
    background: red;
    display: inline-block;/* NEWLY ADDED */
    width: 100%;/* NEWLY ADDED */
}
于 2017-05-15T11:24:12.133 回答
-1

请使用以下代码。

<!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>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</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>&nbsp;</td>
    </tr>
  </tbody>
</table>
</body>
</html>
于 2017-05-15T12:55:42.313 回答