设置初始高度

.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）将解决我目前的所有问题。很高兴详细说明这个例子，以及挖掘一些实际的代码，但希望有一个简单的方法来计算这个，并且无法找到一个跨浏览器的好例子，谢谢！

来源

2012-04-13 mstef

假设你正在使用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。

来源

2012-04-13 22:57:01

'element.style.height'只适用于内联样式......最好使用'element.offsetHeight'。 – 2012-04-13 23:04:59

@GGG：同意并编辑。感谢您的提醒！ =） – 2012-04-13 23:12:54

非常好，你甚至在'parseInt'中得到了基数参数。 +1给你，好先生，后拍:)（'for'-'循环中的'var'虽然不好） – Halcyon 2012-04-13 23:23:21

简单的jQuery解决方案：

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

来源

2012-04-13 22:46:54 Halcyon

设置初始高度

回答

相关问题