Question

我有一个元素，一个ID为homeColumnContain的div，我需要根据其绝对定位的子元素之一（一个ID为homePictureID的图像元素）设置的高度。我的代码如下所示：

window.onload = function() {resizeColumns()};
window.onresize = function() {resizeColumns()};
function resizeColumns() {
  document.getElementById("homeColumnContain").style.height = document.getElementById("homePictureID").style.height;
}

<div id="homeColumnContain">
  <div class="homeColumn">
    <!-- content -->
  </div>
  <div class="homeColumn">
    <div id="slideContain">
      <img src="images/image.jpg" id="homePictureID"/>
      <!-- content -->
    </div>
  </div>
</div>

该代码似乎无效。我添加了用于调整窗口大小和加载窗口大小的侦听器，因为这两个事件是应更改高度的时间。我尝试在HTML文档中移动脚本，但是这没有用。我没有使用JavaScript进行大量的正式培训，因此，对于这种方法为何行不通的任何反馈都会很棒。我希望解决方案不要转移到使用jQuery。

编辑：在这个被标记为重复的问题中，我还尝试了一些回答，但没有一个解决了我的问题。另外，如果相关的话，我在homePictureID中定义的宽度为100％。

Answer 1

尝试一下：

document.getElementById("homeColumnContain").style.height = `${document.getElementById("homePictureID").getBoundingClientRect().height}px`

区别在于您尚未为homePictureID元素设置高度样式，但是可以检查DOM上的实际节点的渲染高度。

无法根据子元素的高度设置元素的高度

1 个答案: