如何使用javascript根据另一个div高度设置div高度？

Question

我有2个div。由于div 1可能更长，即无限滚动div，我想使用javascript使div 2与div 1具有相同的高度。我试图使用下面的代码，但它不起作用。为什么呢？

的javascript：

<script type="text/javascript">
document.getElementById("div2").setAttribute("height",document.getElementById("div1").clientHeight);
</script>

我的divs：

#div1 {
width: 700px;
background: #FFF;
overflow: hidden;
float: left;
}

#div2 {
width: 300px;
background-image: url(../images/user_panel.png);
background-repeat:repeat-y;
}

Answer 1

这个怎么样：

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.style.height = div1.style.height; // Might have to add +"px" here.

就在我的头顶。

Answer 2

setAttribute函数是一个DOM函数，用于向HTML元素添加新属性。您正尝试在div上添加height。这会产生影响：

<div id="div2" height="...">...</div>

但HTML没有定义这样的height HTML元素属性。

您要找的是设置DOM元素的样式。那将是style DOM元素属性。在style内，您必须设置height属性：

document.getElementById("div2").style.height = document.getElementById("div1").clientHeight + "px";

在上面的代码示例中，您可能还会考虑div1的填充（可能会将其带入计算中）。这是因为clientHeight包含填充但style.height没有。

Answer 3

这应该可以解决问题：

document.getElementById("div2").style.height=document.getElementById("div1").clientHeight+'px';