使div的高度自适应td的高度

Question

使div的高度自适应td的高度

3

你好，我有这段代码：

<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应该与表格一起拉伸

谢谢

- Mohamed Wagdy Khorshid

1

请参见以下链接：https://dev59.com/pW3Xa4cB1Zd3GeqPe3nh - Mateusz Nowak

请点击这里，查看与编程有关的内容。 - NoobEditor

@NoobEditor 在Chrome中可以，但在Firefox中不行（我猜还需要 td { height: 100% }）。 - FelipeAls

我认为这个链接与此相关：this。 - T J

@NoobEditor 我不想让表格在整个屏幕上拉伸。 - Mohamed Wagdy Khorshid

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FelipeAls · Accepted Answer

在父元素 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;
}