1

我有 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 设置为特定高度（即 198 像素）将解决我当前的所有问题。很高兴详细说明这个例子，并深入研究一些实际代码，但希望有一种简单的方法来计算这个，并且很难找到一个跨浏览器工作的好例子，谢谢！

4

2 回答 2

2

假设您使用的是 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 小提琴演示。

于 2012-04-13T22:57:01.363 回答
1

简单的 jQuery 解决方案：

$("content_bottom").css({"height": $("main_content").height() + $("content_top").height());
于 2012-04-13T22:46:54.913 回答