javascript - 根据父 div 内部剩余的空间设置 div 的初始高度

Question

我有 3 个 div:

.main_content、.content_top、.content_bottom

.main_content 设置为 100%，但 100% 不是浏览器窗口的大小，它在我页面的中间。

.content_top 设置为 60% 高度。

我想通过 javascript 将 .content_bottom 的高度设置为 .main_content 内剩余的可用空间。

例如，如果 .main_content 的高度为 800px，而 .content_top 的高度为 600px，我想将 .content_bottom 设置为 200px。

这是一个简化的例子，我的情况不像指定 40% 或者让浏览器来决定那么简单。其一，目前 .content_top 上有 46px 的内边距。我正在做一个像 .content_top 和 .content_bottom 之间的界面一样的分屏，拖动一个条来调整两者的大小。这主要是工作，只是底部有问题。能够将 .content_bottom 设置为特定高度(即 198px)将解决我当前的所有问题。很高兴详细说明这个例子，并深入研究一些实际代码，但希望有一个简单的方法来计算这个，但在找到一个跨浏览器的好例子时遇到了麻烦，谢谢!

Answer 1

假设您使用的是 vanilla JavaScript(而不是库)，我建议:

​var cBs = ​document.getElementsByClassName('content_bottom');

for (var i=0,len=cBs.length; i<len; i++){
    var p = cBs[i].parentNode;
    cBs[i].style.height = (parseInt(p.offsetHeight,10) - parseInt(p.getElementsByClassName('content_top')[0].offsetHeight,10)) + 'px';
}​​​​​​​​​​

JS Fiddle demo .