javascript - 如何动态更改div的高度以匹配包含它的div的大小

我得到了div1和div2，其中div2包含div1(和其他一些元素)。每当div1超过该高度时，我都希望动态更改div1的高度以匹配div2的高度(-其他元素的高度)。我之所以不直接设置div1的高度，是因为div2的大小不是固定的，我希望div1的水平滚动条固定在其内容的底部而不是div2的底部。

由于只有两个div，因此没有任何代码可显示。

如果有帮助，div1将包含一个表。

这是到目前为止我得到的:

if(document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight) {
    document.getElementById("div1").style.height = document.getElementById("div1").parentNode.offsetHeight+"px";
    document.getElementById("div1").style.overflowY = "scroll";
}

这适用于设置溢出，但我无法真正改变div1的高度

这是工作版本:

document.getElementById("div1").style.height = '';
document.getElementById("div1").style.overflowY = "";
if(document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight) {
    var height = document.getElementById("div2").offsetHeight - document.getElementById("other_data").offsetHeight;
    document.getElementById("div1").style.height = parseInt(height)+"px";
    document.getElementById("div1").style.overflowY = "scroll";
}

对于那些可能遇到相同问题的人。

最佳答案

这样的事情会起作用。您可以编写一个事件侦听器来监视页面的大小，如果您正在动态更改“父” div标签的大小，则每次只需调用js代码来调整子div的大小即可。

HTML:

<div id=div1><div id=div2></div></div>

JS:

div2 = document.getElementById('div2')
div2.style.height = div2.parentNode.offsetHeight+"px"

关于javascript - 如何动态更改div的高度以匹配包含它的div的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8326273/