位置 div 取决于另一个 div 的高度

Question

我有一个<div>(我们称之为"图像"(，其中包含一些图像<img><img><img>等等。此div 的宽度设置为屏幕的 100%，其中的图像会根据宽度重新缩放。因此，根据浏览器的宽度，我的div的高度会发生变化。

现在我想创建另一个div(我们称之为"after_image"(，它在此图像之后开始，不使用"相对"，而是通过检索 <div id="image"> 的高度，并将其用作"top： px"属性。

可能吗？也许是<script>？(我正在使用PHP(

Answer 1

试试这个：

<div id='image'>
  <img src='' />
  <img src='' />
  <img src='' />
</div>
<div id='after_image'></div>
<script>
  var h = document.getElementById('image').clientHeight // returns height as number
  document.getElementById('after_image').style.top = h + 'px'
</script>

Answer 2

以下是实现您想要的方法，尽管在我看来这是错误的方法。

const
  image = document.querySelector('#image'),
  after = document.querySelector('#after_image')
  
after.style.top = image.getBoundingClientRect().bottom + 'px'

#image {
  width: 200px;
  height: 2750px;
  box-sizing: border-box;
  border: solid blue 3px;
  background: skyblue;
}
#after_image {
  width: 200px;
  height: 500px;
  position: absolute;
  box-sizing: border-box;
  border: solid orangered 3px;
  background: pink;
}

<div id='image'>
  <img src='' />
</div>
<div id='after_image'></div>

如果你真的想这样做，最好将你的 JS 语句绑定到 resize 事件。

window.addEventListener('resize', function(){
  after.style.top = image.getBoundingClientRect().bottom + 'px'
}