Question

这是我目前的代码：

＆＃13;

table{
    table-layout: fixed;
}
table tr td{
    height: 100%;
}
table tr td div{
    height: 100%;
    background: red;
}

＆＃13;

<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>

＆＃13;

正如您所看到的，红色div不会占据父td的100％。我无法为父母设置修正尺寸，因为他们应自动调整内容。

如何将div高度设置为100％，如父td高度？

Answer 1

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

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>

Answer 2

在table tr td div中添加以下样式案例。您的div高度将与父td一样100％。

table tr td div{
    height: 100%;
    background: red;
    display: inline-block;/* NEWLY ADDED */
    width: 100%;/* NEWLY ADDED */
}

Answer 3

请使用以下代码。

<!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>

如何使div高度达到父td的100％

3 个答案: