javascript - 固定高度容器内的两个流体高度 div

Question

我几乎不敢问这个问题，因为它看起来微不足道，但在 stackoverflow 和 Google 上花了 3 个多小时后，我不得不试一试。

我的问题:http://jsfiddle.net/RVPkm/7/

在初始状态下，div#container 将包含 div#list-dynamic-2，我想要 div#list-dynamic-2 使用 div#container 的全高。 Div#list-dynamic-1 将被动态插入并允许拉伸(stretch)到 150px。一旦 div#list-dynamic-1 的高度达到 150px，我希望 div#list-dynamic-2 使用剩余的空间150 像素。 如果有人能告诉我这仅用 CSS 实现毫无意义，应该用 JavaScript 来实现，我也会很高兴。

(顺便说一句，这是一个显示问题的简单示例，实际用法是将选定的用户移动到上层 div 并允许它使用 div#container 的 1/2。想想上面的 div 作为用户的某种购物车。)

Answer 1

这是一个 javascript 解决方案:

var iDiff = 300 - document.getElementById('list-dynamic-1').offsetHeight;
document.getElementById('list-dynamic-2').style.height = iDiff + 'px';

然后您可以从 #list-dynamic-2 的 css 定义中删除 max-height 和 height。

另见 your updated example .

对于 css，我认为你必须 calculate , 但大多数浏览器尚不支持它。