4

Firefox で垂直スクロールバーを表示するコンテナdivを作成するにはどうすればよいですか(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>
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 に答える