Question

给出以下代码

<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
    <div style="display:table-row;border:solid 1px blue">
        <div style="display:table-cell;border:solid 1px green;height:100%">
            <div style="height:100%;background:yellow;overflow-y:auto">CONTENT
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
            </div>
        </div>
    </div>
    <div style="display:table-row;border:solid 1px blue">
        <div style="display:table-cell;border:solid 1px green;height:100px">
            <div>INPUT</div>
        </div>
    </div>
</div>

Chrome会根据表格单元格的可用大小正确调整CONTENT区域的大小，而Firefox和IE则会增加表格单元格的大小以适合内容。如何让FF / IE像Chrome一样？

小提琴中的例子： http://jsfiddle.net/2p6Jx/

更新：我不能使用固定高度，表格应根据其父元素的高度和宽度进行更改

更新2：添加display:-moz-stack解决了FF中的问题，现在只是IE（http://jsfiddle.net/2p6Jx/3/）

Answer 1

我更改了您的代码，它可以在IE / FF / chrome中使用。

<div style="border:solid 5px orange;width:400px;height:400px">
    <div style="display:table;border:solid 1px red;width:100%;height:100%">
       <div style="display:table-row;height:300px;width:100%;">
            <div style="display:table-cell;">
                <div style="background:yellow;overflow-y:auto;height:300px;">
                    CONTENT
                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
                </div>
            </div>
       </div>
        <div style="display:table-row;height:100px;width:100%;">
            <div style="display:table-cell;border:solid 1px green;height:100px">
                <div>INPUT</div>
            </div>
        </div>
    </div>
</div>

CSS - Firefox / IE中超出高度的表格单元格布局

1 个答案: