Question

我在固定位置有一个红色div：顶部和底部是固定的。

这个div包含一个表格，其中一个单元格包含一个可滚动的div，因此内容不能溢出红色div。

在Chrome上看起来像这样：

enter image description here

但是在Firefox上，内容增长并从红色框中溢出：

enter image description here

这是我的HTML：

<div id=a>
    <div id=b>
        <table id=c border=1>
            <tr><th height=20 width=20>
                <input type=button id=but value="Fill cell">
            </th><th>A</th></tr>
            <tr><th>dataname</th>
                <td><div id=val class=scrollable>cell content</div></td>
            </tr>
        </table>
    </div>
</div>

和CSS：

#a {
   position:fixed; top:20px; left:20px; bottom:50px;width:200px;
   background:red;
}
#b { height:100%; }
#c { width:100%; height:100%; }
.scrollable {
    width:100%; height:100%;
    overflow-y:auto;
}

这是测试的小提琴：http://jsfiddle.net/xusqc/

我建议您在提交答案之前在FF上测试您的提案。

我如何修复我的代码以使用Firefox和IE9 +我现在在Chrome上的行为？

请注意，表格第一行的高度可能会在我的应用程序中动态更改。如果我的数据表有更多的行和单元格，那么解决方案必须适用。

Answer 1

由于我找不到跨浏览器的纯HTML / CSS解决方案，我不得不使用一些JavaScript（和jQuery，但如果我的单元格中没有很多事件处理程序与jQuery绑定，那么它可以在没有它的情况下完成）。

想法是清空包含.scrollable div的单元格，计算它们的高度，重新填充单元格，然后将高度设置为固定。

这是我写的函数：

function resetScrollableHeights(){
    $sp = $('.scrollable').closest('td'), heights = [], contents = [];
    $sp.each(function(){
        $(this).css('height', 'auto'); // without this, window shrinking would be badly handled
        contents.push($('.scrollable', this).detach());  // let's empty all scrollables
    });
    $sp.each(function(){ //now store the heights
        heights.push($(this).height());
    });
    $sp.each(function(){ // refill the scrollables and fix the heights
        $(this).append(contents.shift()).css('height', heights.shift());
    });
}

调整窗口大小时调用该函数：

$(window).resize(resetScrollableHeights);

当.scrollable div的内容发生变化时，也必须调用它。

我在Chromium / Ubuntu，Chrome / Android，Firefox / Ubuntu和IE9 / Win7上进行了测试。因为它在基于WebKit的浏览器上没用，我没有任何纯HTML / CSS的错误，它可以通过一些检测停用，但我更喜欢我的代码免于浏览器检测。

Demonstration

Answer 2

将<td>更改为<td class="scrollwrap">，即包含目标div的那个。
更新您的CSS：

 .scrollwrap { position:relative; }
 .scrollable {
     position:absolute; width:100%; height:100%; top:0; left:0; right:0; bottom:0;
     overflow:auto;
 }

但请注意：

height:100%仅在父母也有特定身高时才有效，并不总是以计算出的高度工作;
在left元素上使用right＆amp; top或bottom＆amp; position:absolute时，某些浏览器无法计算宽度＆amp;身高
overflow-y或overflow-x有一些使用限制。

在Firefox和IE9 +上溢出

2 个答案: