Question

我使用DIV创建了一个表格布局，我希望其中一个单元格可以滚动。为了达到这个目的，我使用了overflow：auto和height：100％。它适用于Chrome和Safari，但不适用于IE9。在IE9中，它只是扩展了单元格的高度，我可以滚动整个页面，但这不应该是它应该做的。

关于如何解决这个问题的任何想法？

（注意：我已将它缩小到高度：SidePanel类中的100％样式。如果我使用实际像素值，则单元格将正确滚动。例如：height：500px。 - 似乎IE9和FF在高度渲染时遇到问题：100％和溢出：自动。）

<!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>

这是截图：

enter image description here

DIV表格单元格不在IE9中仅使用height：100％和overflow：auto滚动

0 个答案: