css - 垂直堆叠，中间部分尽可能高

Question

好的，所以我有一个非常简单的堆栈:

---------
|   A   |
---------
|   B   |
---------
|   C   |
---------

A 和C 都有已知的固定高度。然而窗口高度(移动视口(viewport))是未知的。我想让 B 尽可能高。我将使用 overflow-y: auto，所以溢出不是问题。实际问题是将其扩展到一个未知(但可计算)的值。

我已经通过计算 $(window).height() - ($(A).height + $(C).height()) 解决了这个问题，但是一定有更好的方法(或 jQuery 插件)。

Answer 1

确保容器有一个非static定位，然后使B position: absolute; 并设置两个top 和 bottom 分别到 A 和 C 的高度。

例如，如果 A 的高度为 20 像素，而 C 的高度为 40，则 B 的 CSS 将如下所示:

#b {
    bottom: 40px; /* Height of C */
    left: 0;
    position: absolute;
    right: 0;
    top: 20px; /* Height of A */
}