javascript - 在固定高度的 y 轴上溢出滚动

Question

我有一个看似简单的问题是:

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>​

我在一个容器中有 3 个 div:A 和 B 具有固定的高度。 C 必须有一个可扩展的高度，它随着容器的高度而扩展。如果 C 中的内容太大，我希望 C 滚动，但让 A 和 B 保持在同一个位置。

代码在:http://jsfiddle.net/V2c9G/

我做不到。

我试过:

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="xxx" style="overflow-y:scroll">
       <div class="c"></div>
    </div>
</div>​

没有成功。容器 div 应该随浏览器调整大小。

一个复杂的例子是 http://www.sencha.com/examples/#overview (我说的是布局，让浏览器变小，你会看到在标题保持固定的情况下出现滚动)但这不是解决方案，因为它使用 JS 重新计算高度。

有什么想法吗？

Answer 1

编辑 3:

这是我推荐的解决方案，它使用下面编辑 2 中的 CSS 作为后备方案，但使用 JavaScript 在加载时和窗口大小发生变化时适当调整 div 的大小。如果客户端禁用了 JavaScript，CSS 解决方案提供了一个不错的起点，并且 JavaScript 确实不应该影响页面的性能，所以我认为没有理由不使用 JavaScript 来完善您想要看到的内容。工作 fiddle can be seen here .此外，这里是适当的 JavaScript 代码:

var resizeDiv = function(){
    document.getElementById('c').style.height = getWindowHeight() - 64 + 'px';
};

//Framework code
var getWindowHeight = function(){
    if (window.innerHeight) {
        return window.innerHeight;
    }
    if (document.body && document.body.offsetHeight) {
        return document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetHeight ) {
        return document.documentElement.offsetHeight;
    }

    return 740;//provide a default height as a fallback
};

//resize on pageload
window.onresize = resizeDiv;
setTimeout(resizeDiv);

---

我认为您需要调整第三个 div 的绝对高度以占用剩余空间(绝对高度或百分比)，将 overflow 设置为 hidden 在父 div 上，并让第三个内部 div 中的内容判断是否显示滚动条。 Here's an updated fiddle using the absolute height method .

编辑:

根据您的“将容器想象成浏览器”的评论(对我来说这意味着滚动条应该在容器上)，您真正需要做的就是将溢出设置为“滚动”并在第三个 div 中设置高度到“自动”。 Here's an updated fiddle for that .

编辑#2:

根据您对这个问题的评论，听起来您需要使用百分比法。最直接的是 make the height of a, b, and c a percentage (我不得不调整边距以使其适合所有缩放)。不幸的是，使用这种方法，顶部组件将不会被固定，听起来您可能在那里显示看起来很时髦的静态内容。因此，另一种选择是为您的浏览器窗口选择一个支持的最小尺寸，并调整第三个元素的百分比以使其恰好适合。 Here's a fiddle for that .然而，缺点是窗口的高度越大，页面底部的空白空间就越多，并且在一定高度以下会有 2 个滚动条。要在顶部使用固定大小的 div 正确执行此操作，您需要向 window.resize 方法添加一个事件监听器，并在发生这种情况时根据窗口的新大小适本地调整第三个 div 的大小。

注意:在这种情况下，我希望 W3C 批准百分比加像素的高度、宽度和其他尺寸属性!