0

プロパティoverflow：autoを使用し、本体にoverflow：hiddenを設定して、divでスクロールバーを使用したいと思います。Chromeではうまく機能しますが、FirefoxやIEでは機能しません。

このコードに2つの異なる動作がある理由を誰かが私に説明できますか？

<html lang="en" class="fillScreen" dir="ltr"><head> 
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   <meta content="IE=edge" http-equiv="X-UA-Compatible">



    <link rel="stylesheet" href="template4.css" type="text/css">  

    <style>

        .fillScreen {
            bottom:0px;
            height:100%; 
        } 

         html, body {
            margin: 0; padding: 0;
            height: 100%;
            overflow: hidden; 
        }


    </style>

  </head> 

  <body class="fillScreen"> 

   <div class="fillScreen" style="display:table;width:100%">

        <div class="fillScreen" style="display:table-row">

            <div style="border: solid 2px red;overflow:auto;display:table-cell;overflow:auto" class="fillScreen" >              

                    <div class="fillScreen" style="display:table;width:100%;overflow:auto">             

                        <div class="fillScreen" style="border: solid 1px blue;" style="display:table-row">              

                            <div class="fillScreen" style="display:table-cell">             
                                <div class="fillScreen" style="position:relative">   

                                    <button width="142px" height="20px" style="position:absolute;top:99px;left:20px;">OK</button>

                                </div>
                            </div>          

                        </div>

                    </div>

            </div>
        </div>

    </div>

</body>
</html>

ここでテストすることができますhttp://jsfiddle.net/nMSvv/2/ ウィンドウのサイズを変更すると、Chromeでスクロールバーが表示されます。

私は絶対にボタンを絶対位置で表示する必要があり、このdivの構造を維持する必要があることを付け加えます

助けてくれてありがとう

4

1 に答える 1

0

解決策はこちら: http://jsfiddle.net/nMSvv/3/

スクロールバーが必要な div を次のようにラップする必要がありました。

<div class="fillScreen" style="position:relative;overflow:auto">               
    <div style="position:absolute;top:0px;left:0px">

    </div>
</div>
于 2012-12-18T13:25:15.073 に答える