Question

我有两个div并排。它们都没有标准高度，但第一个具有内容，而另一个在表单子表达后填充内容。我想将第二个的高度设置为与第一个相同。

这是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的高度没有变化。有什么帮助吗？

Answer 1

您正在寻找offsetHeight。最左边div的height属性未设置（因为这是实际的CSS属性，并且您没有静态设置高度），但offsetHeight是div的实际高度，由它的内容。

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

这是一个jsFiddle来演示。

请注意，还有clientHeight。区别在于offsetHeight还包括填充和边框。另见this answer。

Answer 2

我看到你正在使用jQuery。这里的jQuery版本等同于您使用的本机JavaScript代码。

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

Demo ( JsFiddle)

由于您使用left和right作为元素＆＃39;我，我认为它们是inline-block。所以你应该设置另一个的偏移高度而不是实际高度：

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

Demo (JsFiddle).

Answer 3

使用jQuery

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

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

或直接

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

Answer 4

我创建了一个帮助函数，该函数接受带有多个对象的jquery对象来设置高度相等。看看...... https://gist.github.com/rob-bar/10283279 优点是功能是隔离的，所以当你有更多的div而不是你想要的div时，你可以列出要检查的东西....等等......

BUT！请注意，您可以使用 flexbox 或使用 display：table and cell 在孩子身上达到相同的高度。

使用javascript从另一个div高度设置div高度

4 个答案: