Question

我得到div1和div2，div2包含div1（以及其他一些元素）。我想动态地改变div1的高度以匹配div2的高度（ - 其他元素的高度），只要div1超过该高度。我之所以不直接设置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";                             
}

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

Answer 1

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

HTML：

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

JS：

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

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

1 个答案: