Question

如何让容器 div在Firefox中显示垂直滚动条（它在Chrome中运行，我不关心IE *）？通过'make'，我的意思是让它在不使用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>

Answer 1

<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 .. :)

放置在100％高度的容器内时，Overflown DIV不显示垂直滚动条

1 个答案: