CSS table cell overflow is ignored by FF & Opera

前端未结

关注

 1  520

I have a three rows CSS table, which is nested in a fixed size div. The table has three rows, the height of first two rows is defined by the contents (I can\'t give any expl

相关标签:

1条回答

感情败类

2021-01-15 06:45

Here's the solution (overflowed div has to be positioned absolutely and wrapped in another relatively positioned one):

<html>
<body>
    <div style="width: 500px; height: 300px;">
        <div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: #ccc;">Test</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: white;">Filter</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; height: 100%;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="overflow-y: scroll; position: absolute; top: 0px; right:0px; bottom: 0px; left: 0px;">
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</body>
</html>

0 讨论(0)