0

セルの 1 つをスクロールする DIV を使用してテーブル レイアウトを作成しました。これを実現するために、overflow:auto と height:100% を使用しました。Chrome と Safari では動作しますが、IE9 では動作しません。IE9では、セルの高さを拡張するだけで、ページ全体をスクロールできますが、それはすべきことではありません.

これを解決する方法についてのアイデアはありますか?

(注: SidePanel クラスの height:100% スタイルに絞り込みました。実際のピクセル値を使用すると、セルは適切にスクロールします。たとえば、height:500px です。 - IE9 と FF の両方に問題があるようです。 height:100% と overflow:auto でレンダリングします。)

<!DOCTYPE html>
<html>
   <head>
     <style>
      * { /* Resetting the defaults */
          margin: 0;
          padding: 0;
      }

      html, body { /* Assigning Height To Containers First */
          height: 100%;
      }


      .headerRow
      {
        height:50px;
      }

      .fullHeight
      {
        height:100%;   
      }

      .sidePanel
      {
        overflow:auto;
        height:100%;    
      }


        .div-table{
          display:table;         
          width:auto;         
          background-color:#eee;         
          border:1px solid  #666666;         
          border-spacing:5px;/*cellspacing:poor IE support for  this*/
        }
        .div-table-row{
          display:table-row;
          width:auto;
          clear:both;
        }
        .div-table-col{
          float:left;/*fix for  buggy browsers*/
          display:table-column;         
          width:200px;         
          background-color:#ccc;  
        }


     </style>
</head>
<body style="background-color:White;overflow:auto">
    <div id="mainTable" class="div-table fullHeight">
        <div class="div-table-row headerRow">
            <div class="div-table-col">
                My Header Is Here
            </div>
        </div>

         <div class="div-table-row">
            <div class="div-table-col">
                Image here
            </div>
            <div class="div-table-col sidePanel">

                  td 2 content <br>too <br>tall <br><br><br><br><br><br>
                  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                  <br><br><br><br><br><br><br><br><br><br><br><br>to fit height of the screen, 
                  so a scroll bar is added.  In IE9 it doesn't work because it just extends 
                  the height of the DIV

            </div>
         </div>
</div>

</body>
</html>

スクリーンショットは次のとおりです。

ここに画像の説明を入力

ここに画像の説明を入力

4

0 に答える 0