使div拉伸以适合td高度[重复]答案

【问题标题】：Make div stretch to fit td height [duplicate]使div拉伸以适合td高度[重复]
【发布时间】：2014-07-06 18:18:45
【问题描述】：

您好，我有这个代码，

<html>
    <body>
        <table>
            <tr>
                <td>
                    <div class="the-div">h:100%</div>
                </td>
                <td>
                    <div class="the-div-w-height">h:100px</div>
                </td>
            </tr>
        </table>
    </body>
</html>

这种风格，

.the-div
{
  height: 100%;
  background-color: red;
}

.the-div-w-height
{
  height : 100px;
  background-color: yellow;
}

我想让红色的div在td里面拉伸，其他div可以根据内容改变高度，第一个div要跟table一起拉伸

谢谢

【问题讨论】：

见stackoverflow.com/questions/14442747/…
here you go
@NoobEditor 在 Chrome 中 OK，在 Firefox 中 KO（我猜也需要 td { height: 100% }）
@gillesc 与表 imho 无关，这是一个不同的情况，尤其是在 Firefox 中
我这个this是相关的。

标签： html css html-table stretch

【解决方案1】：

在父母table 和td 上添加height: 100%：

http://codepen.io/anon/pen/ByjIv

table {
  height: 100%;
}
td {
  border: 1px solid #000;
  height: 100%;
}
.the-div
{
  height: 100%;
  background-color: red;
}

.the-div-w-height
{
  line-height: 100px;
  background-color: yellow;
}

【讨论】：

我不想改变表格或 td 的高度，这会拉伸表格以适应整个页面
??它不会改变桌子的高度（检查 Codepen）。但是在对您的问题的第二条评论中（来自 gillesc），这就是皮特的解决方案所做的。