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

时间:2012-01-13 22:07:33

标签: javascript html css

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

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

在初始状态下,div#container将包含div#list-dynamic-2,我希望div#list-dynamic-2使用div#container的完整高度。 Div#list-dynamic-1将动态插入,并允许延伸至150pxdiv#list-dynamic-1的高度达到150px后,我希望div#list-dynamic-2使用150px的剩余空间。 如果有人能告诉我,仅使用CSS实现这一点毫无意义,而且应该使用JavaScript来完成,我也很高兴。

(顺便说一下,这是一个显示问题的简单示例,真正的用法是将所选用户移动到上部div并允许它使用div#container的1/2。想想上部{{1作为用户的某种购物车。)

2 个答案:

答案 0 :(得分:1)

这是一个javascript解决方案:

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

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

另见your updated example

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

答案 1 :(得分:0)