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

Answer 2

简单的jQuery解决方案：

$("content_bottom").css({"height": $("main_content").height() + $("content_top").height());

根据父div中剩余的空间设置div的初始高度

2 个答案: