從另一個div的高度設置div的高度與javascript的差距

我有兩個div並排。他們都沒有一個標準的高度，但第一個有內容時，另一個充滿內容後的形式submition。我想將第二個的高度設置爲與第一個的高度相同。從另一個div的高度設置div的高度與javascript的差距

下面是HTML：

<div id='left'> 
........... 
</div> 
<div id='right'> 
........... 
</div> 

<script type="text/javascript"> 
    $(document).ready (function(){ 

    var divHeight = document.getElementById('left').style.height; 
    document.getElementById('right').style.height = divHeight+'px'; 
    }); 
</script>

我沒有在控制檯上的任何錯誤，但是第二個div的高度不會改變。任何幫助？

來源

2014-04-09 Tasos

是的，因爲'style.height'將返回內聯CSS樣式而不是元素的計算高度。 – VisioN

你正在尋找爲offsetHeight。您最左邊的div的height屬性未設置（因爲這是實際的CSS屬性，並且您沒有靜態設置高度），但offsetHeight是由其內容定義的div的實際高度。

var offsetHeight = document.getElementById('left').offsetHeight; 
document.getElementById('right').style.height = offsetHeight+'px';

這裏是一個jsFiddle來演示。

請注意，也有clientHeight。區別在於offsetHeight也包含填充和邊框。另請參閱this answer。

來源

2014-04-09 15:02:02 Joost

我之前嘗試過，但沒有成功。你知道我是否有問題，因爲''正確'div是一個很好的Twitter-Bootstrap？ – Tasos

這應該不成問題。事實上，看看這個更新的小提琴，其中包括「正確」 - 它似乎工作得很好。 HTTP：//的jsfiddle。net/6gERe/1 /肯定還有別的東西會造成傷害，然後...... – Joost

這是一個錯字。謝謝:) – Tasos

我看到你正在使用jQuery。以下是與您使用的原生JavaScript代碼相同的jQuery版本。

$(document).ready (function(){ 
var divHeight = $('#left').height(); 
$('#right').height(divHeight); 
});

Demo (JsFiddle)。

由於您使用left和right作爲元素ID，我假設它們是inline-block s。所以，你應該設置另一個比真正的高度偏移高度：

$(document).ready (function(){ 
var divHeight = $('#left')[0].offsetHeight; 
$('#right').height(divHeight); 
});

Demo (JsFiddle).

來源

2014-04-09 15:01:34 Subin

使用jQuery

$(document).ready (function(){ 
    var leftHeight = $('#left').height(); 

    $('#right').height(leftHeight); 
});

或直接

$(document).ready (function(){ 
    $('#right').height($('#left').height()); 
});

來源

2014-04-09 15:01:44

檢測到錯字... – VisioN

我創建了一個輔助功能，接受與多個對象一個jquery對象來設置的高度相等。檢查出來... https://gist.github.com/rob-bar/10283279 好處是，功能是孤立的，所以你可以做一個事情的列表，當你有更多的div比你想要的div或div divs更多的時候....等等...

但是！請注意以下事實：您可以使用flexbox或display：table和cell完成對兒童的平等身高。

來源

2014-04-09 15:34:14

從另一個div的高度設置div的高度與javascript的差距

回答

相關問題