4

如何使容器div 在 Firefox 中显示垂直滚动条（它适用于 Chrome，我不关心 IE*）？通过“制作”，我的意思是让它在不使用 JS 的情况下工作。

小提琴

<html>
<head>
    <title></title>
    <style type="text/css">

        .full-size { width: 100%; height: 100%; }
        .full-height { height: 100%; }
        .table { display: table; }
        .table-row { display: table-row; }
        .table-cell { display: table-cell; }
        .thin-border { border: 1px solid gray; }
        .border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
        .small-box { width: 50px; height: 50px; }
    </style>
</head>
<body>
    <div style="width: 400px; height: 200px; margin: 10px; border: 1px solid #ccc;">
        <div class="full-size table">
            <div class="table-row" style="height: 45px;">
                <div class="table-cell">
                    <p>Test</p>
                </div>
            </div>
            <div class="table-row full-height">
                <div class="table-cell full-height" style="overflow: hidden;">
                    <div class="full-height" id="container" style="overflow-y: scroll;">
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
4

1 回答 1

3 
<body>
    <div style="width: 400px; height: 200px; margin: 10px; border: 1px solid #ccc; ">
         <div class="table-row" style="height: 45px;">
                <div class="table-cell">
                    <p>Test</p>
                </div>
            </div>
        <div class="full-size table">

            <div class="table-row full-height"style="height:200px; overflow-y:scroll;>
                <div class="table-cell full-height" >
                    <div class="full-height" id="container" >
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

更新！：

http://jsfiddle.net/v3Ccj/

基本上你只是在错误的地方溢出了！

请记住，父母可以隐藏溢出 - 然后孩子可以拥有额外的滚动，这样您就可以更好地控制每个 div 的溢出。

参考：http ://www.w3schools.com/cssref/pr_pos_overflow.asp

巧合的是，这也会 IE.. :)

于 2013-06-28T11:02:20.940 回答