如何安排div作为码头面板？

Question

我需要知道如何根据我的以下要求对下面的div进行对齐和调整大小。

区域A 区域A需要在给定高度的顶部停留。区域A的高度不会改变。

B区 区域B的高度在0-最小高度之间变化。当B的高度为0时，应拉伸区域C以填充区域B.

区域B的高度也从最小高度增加到X (X > min-height)。在那种情况下，区域C应缩小，以便为区域B提供空间。

区域C 区域C是此页面的填充区域。需要根据区域B调整高度。

区域D 区域D留在页面底部，高度不变。

我想知道是否有可能用css实现上述目标？或者我需要使用JQuery。如果可以使用CSS？我想知道怎么样？ （我知道如何处理JQuery ）

*我正在使用CSS3 / HTML5

更新 我已添加此JSFiddle

此外，我不太确定这个问题是否符合SO问题条件。如果没有，有人请删除此

Answer 1

取决于您需要多长时间的浏览器支持，这是flex box的典型用例。请记住，弹性框是一个新的CSS功能。它适用于大多数常绿浏览器，但它不适用于IE 8和9.请参阅here。我写了一篇博文来解决这个特殊的布局。这是一个无耻的自我推销链接我的blog post。 flex框的一个主要缺陷是在草稿过程中曾经有过一种旧语法，这与大多数浏览器现在支持的标准化语法完全不同。所以要小心。

需要设置的方式如下：

1. 您需要创建一个包含A，B，C和D的容器。将display: flex; flex-direction: column; height: 100%;应用于此容器。

2. A，B，D保持自己的身高。他们实际上并不需要任何特别的东西。设置您通常想要的高度和内容。

3. C是有趣的部分。我们希望它增长或缩小以占据剩余区域。因此，您需要flex-grow: 1; flex-shrink: 1; flex-basis: 0;或其简短形式flex: 1 1 0;。

如果你不想使用弹性盒子，那么你最安全的选择是使用一些JavaScript，这就是它在日子里的表现。所以基本上你想要向resize添加一个window事件监听器，然后测量你的A，B，D高度并将剩余高度分配给C.例如，检查https://jsfiddle.net/并查看它的id="content" div。