Question

我有一个有三行的表。第一个和最后一个的高度设置。中间人应该占用剩下的所有空间。在那排我有三个牢房。每个人的高度应该等于桌子行。

快速示例在此处：http://jsbin.com/hidibate/3/edit

它适用于Chrome / FF，但在IE上会出现滚动。它看起来像单元格高度设置为表的100％而不是行。

如果jsbin无效，则来源：

HTML：

<div id="o">
    <div id="sc">
        <div id="rc">
            <table>
                <tr id="f">
                    <td>foo</td>
                </tr>
                <tr id="m">
                    <td>
                        <div id="i">Fooo</div>
                    </td>
                </tr>
                <tr id="l">
                    <td>bazz</td>
                </tr>
            </table>
        </div>
    </div>
</div>

的CSS：

#o {
    background-color:red;
    width: 500px;
    height:360px;
    position:relative;
}

#sc{
    height:100%;
    width:100%;
    position:relative;
    overflow:auto;
}

#rc{
    height:100%;
    width:100%;

}
table {
    height:100%;
    width:100%;
    border-collapse:collapse;
    padding:0;
    border:none;
    empty-cells:show;
    overflow:hidden;
}
#f {
    height:20px;
    background-color:blue;
}
#l {
    height:30px;
    background-color:green;
}
#m {
    background-color:yellow;
}
#m td {
    position:relative;
}
#i {
    height:100%;
    width:100%;
    background-color:orange;
}

Answer 1

#m {
    background-color:yellow;
    height:100%;
    width:100%;
}

试试这个

表格单元格设置为高度：100％。在IE中，它将其高度设置为表的100％而不是表行

1 个答案: