如何将div高度设置为父td的100％
[英]How to make div height to 100% of parent td
问题描述
This is my current code: 
这是我当前的代码：
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>
As you can see the red div doesn't take the 100% of the parent td . 如您所见，红色div不会占用父td的100％。 I can't set fix dimensions to the parents, as they should adjust automatically to the content. 我无法为父母设置固定尺寸，因为他们应该自动调整内容。
How can I set the div height to be 100% like the parent td height? 如何将div高度设为父td高度的100％？
3 个解决方案
解决方案1
1 已采纳 2017-05-15 10:28:37
After some researches i got this solution :) Hope that is working for you :) 经过一些研究，我得到了这个解决方案:)希望对您有用:)
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>
解决方案2
-1 2017-05-15 11:24:12
Add following style cases inside table tr td div . 在table tr td div添加以下样式案例。 Your div height will be 100% like the parent td. 您的div高度将像父td一样为100％。
table tr td div{
height: 100%;
background: red;
display: inline-block;/* NEWLY ADDED */
width: 100%;/* NEWLY ADDED */
}
解决方案3
-1 2017-05-15 12:55:42
Please use the below code. 请使用以下代码。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.