Question

这是我的用例：

＆＃13;

table {
    height: 100%;
    width: 100%;
}
td { background: green; height: 300px; }
div { height: 100px; background: blue; }

＆＃13;

<table>
    <tr>
        <td>1</td>
        <td>
            <div>2</div>
            <div>2</div>
        </td>
        <td>3</td>
    </tr>
</table>

＆＃13;

我希望div占据表格单元格的整个部分。中间单元格中不应该有任何绿色。

注意，我不知道细胞有多大（它可能大于300px）
而且我不知道会有多少div（可能有1个很多）

我想用css而不是用javascript来做这件事。我该怎么做？

Answer 1

只需像这样更改div的CSS：

td div {
    height: 50%;
    background: blue;
    display:block
}

See fiddle高度已更改（将td的高度更改为您想要的任何高度，以便您了解其工作原理）

编辑：我没有看到你在td元素中有不同数量的div，所以方法不同。为此，首先添加一个容器div，如下所示：

table {
    height: 100%;
    width: 100%;
}
td {
    background: green;
    height: 600px;
}
.box {
    display:flex;
    background: blue;
    flex-direction:column;
    justify-content: space-around;
    flex-flow: column wrap;
    height:100%;
    align-items: stretch;
}
.box div {
    text-align:center;
    height:auto;
    flex-grow:2
}
.red {
    background:#f00
}
.grey {
    background:#ccc
}
.yello {
    background:#fc0
}

现在我们使用display:flex属性，column方向，确保.box类（我们添加的容器div）的高度为{{1}所以它需要整个高度。

请参阅new fiddle here

Answer 2

试试这个：

<强> CSS

table {
    height: 100%;
    width: 100%;
}
td { background: green; height: 300px; }
div { height: inherit; background: blue; }

获取div来填充表格单元格

2 个答案: