0

我已经使用 DIV 创建了一个表格布局，我希望其中一个单元格滚动。为此，我使用了溢出：自动和高度：100%。它适用于 Chrome 和 Safari，但不适用于 IE9。在 IE9 中，它只是扩展了单元格的高度，我可以滚动整个页面，但这不是它应该做的。

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

（注意：我已将其缩小到 SidePanel 类中的 height: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>

这是屏幕截图：

在此处输入图像描述

在此处输入图像描述

4

0 回答 0