在 Firefox 和 IE9+ 上溢出答案

【问题标题】：Overflowing on Firefox and IE9+在 Firefox 和 IE9+ 上溢出
【发布时间】：2013-01-30 10:57:48
【问题描述】：

我在固定位置有一个红色 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;
}

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

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

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

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

【问题讨论】：

@queueoverflow 它不起作用，我不希望滚动条在不需要时出现。
在 td 中使用 div 不是一个好习惯，为什么不将 id 和 class 传递给 div 的父 td？只是一个建议
@Ark 如果它可以重现我需要的行为（并且我现在在 Chrome 上），我很乐意使用更好的做法。我的 td 中有一个 div 的原因是 td 不能滚动。

标签： css html internet-explorer firefox

【解决方案1】：

将 <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% 仅适用于父母也有特定身高的情况，并不总是适用于计算出的身高；
在position:absolute元素上使用left&right或top&bottom时，某些浏览器无法计算宽度和高度
overflow-y 或 overflow-x 有一些使用限制。

【讨论】：

我的结构的重点是为红色 div 计算高度。所以这行不通。
表格单元格不能定位，甚至不能相对。所以绝对 div 不会相对于表格单元格定位自身。
@Simon 请参阅 stackoverflow.com/questions/4564638/… 并尝试一下。
这正是我所说的：position: relative 对表格元素的影响是未定义的，这导致几乎所有浏览器都“不适用”。您链接上显示的代码只是证实了我的说法。
@Simon 不，我解释了其中的含义。他试图实现的目标无法通过符合 W3 的 CSS 实现。我能做的最好的就是为这个问题提供一个可行的解决方案。我的解决方案适用于大多数浏览器：jsfiddle.net/en98u

【解决方案2】：

由于我找不到跨浏览器的纯 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

【讨论】：