Question

我发现了几个解决类似问题的问题，但每个解决方案都有一个特殊性，阻止它适用于这种情况......

我的问题是我想要一个绝对定位的，100％宽度的div表格单元格。我无法在任何地方使用固定宽度或高度，因为所有内容的宽度和高度都不同。我希望div从单元格高度的底部定位，这受到下一个单元格中内容的（可变）高度的影响。

以下代码在IE8中工作正常（是的，仍然必须支持它......），IE11和Chrome - 红色div保持在左表格单元格中。然而，在Firefox中，div的实际大小根据TABLE的宽度而定，覆盖了右侧单元格的一部分。

如何才能让它在Firefox中运行？

HTML：

<table id="OuterTable" border="1">
    <tr>
        <td id="TableCell">
            <table id="InnerTable" border="1">
                <tr>
                    <td>Dummy text of varying length</td>
                    <td>Dummy</td>
                </tr>
            </table>
            <div id="AbsoluteDiv">
                <div id="InnerDivLeft">Left Div</div>
                <div id="InnerDivRight">Right Div</div>
            </div>
        </td>
        <td>
            <select multiple="multiple" size="10">
                <option>Varying length options</option>
            </select>
        </td>
    </tr>
</table>

CSS：

#OuterTable {
    position:relative;
}
#TableCell {
    vertical-align:top;
    position:relative;
}
#AbsoluteDiv {
    background-color:red;
    position:absolute;
    width:100%;
    bottom:30px;
}
#InnerDivLeft {
    float:left;
}
#InnerDivRight {
    float:right;
}

Answer 1

我也遇到过这个问题。根据规范，表格单元格无法定位。意思是FireFox正在做正确，而其他人都在这样做＆＃34;对＆＃34;。

有点hacky，但你可以随时使用div＆＃34; display：table-cell＆＃34;然后将他们定位为相对。

This article有一个很好的JS替代方案。

Answer 2

感谢Seth指出我的JavaScript解决方案，它还有一个额外的好处，就是在我的真实世界中修复IE上的小填充/边距问题＆＃39;的使用。

所以，我用<td id="TableCell">（由Hashem建议）包装了<div class="wrapper">的全部内容，并使用jQuery将其高度调整为表格单元格的实际高度：< / p>

$('#TableCell div.wrapper').height($('#TableCell').height());

修订演示（添加的包装颜色为蓝色）：http://jsfiddle.net/AGYGH/9/

在Firefox中包含TD内部绝对定位的100％宽度DIV

2 个答案: