css - 在 Firefox 和 IE9+ 上溢出

Question

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

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

在 Chrome 上看起来像这样:

但在 Firefox 上，内容会增长并溢出红框:

这是我的 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;
}

这是测试用的 fiddle :http://jsfiddle.net/xusqc/

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

如何修复我的代码，使其在 Firefox 和 IE9+ 上具有我现在在 Chrome 上的行为？

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

Answer 1

因为我找不到跨浏览器的纯 HTML/CSS 解决方案，所以我不得不使用一些 JavaScript(和 jQuery，但如果我的单元格中没有很多与 jQuery 绑定(bind)的事件处理程序，没有它也可以完成).

想法是清空包含 .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