2

我在固定位置有一个红色 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 上的行为？

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

4

2 回答 2

0

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

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

这是我写的函数：

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 错误，因此可以通过一些检测将其停用，但我更喜欢我的代码不受浏览器检测的影响。

示范

于 2013-02-15T09:27:05.887 回答
-1
  1. 将 更改<td>为<td class="scrollwrap">，包含您的目标 div 的那个。
  2. 更新你的 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或top&时，某些浏览器无法计算宽度和高度bottomposition:absolute
  • overflow-y或overflow-x有一些使用限制。
于 2013-02-14T15:51:42.547 回答