固定高度容器内的两个流体高度潜水器

Two fluid height divs inside a fixed height container

本文关键字：高度 两个 潜水      更新时间：2023-09-26

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

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

在初始状态下，div#container将包含div#list-dynamic-2，其中我希望div#list-dynamic-2使用div#container的全高。CCD_ 5将被动态地插入并且被允许延伸到CCD_。一旦div#list-dynamic-1的高度达到150px，我希望div#list-dynamic-2使用150px的剩余空间。如果有人能告诉我，仅仅用CSS实现这一点毫无意义，而应该用JavaScript来实现，我也会很高兴。

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

这里有一个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。

另请参阅您更新的示例。

对于css，我认为你必须进行计算，但大多数浏览器还不支持它。

这让我想起了jQuery UI布局插件。请参阅演示：http://layout.jquery-dev.net/demos/nested_sidebars.html

相关文章：