設置初始高度

.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

設置初始高度

回答

相關問題