Javascript 在流体布局中，将div包裹在绝对定位div下方

我有一个随浏览器缩放的流体图像旋转器。我必须将旋转器内的图像设置为绝对，但这会影响布局，因为“身体内容”落在图像后面。如果图像设置为“相对”，则图像旋转器不工作。我整天都在看这个有人有什么想法吗？这是我的密码：

HTML:

这是我的小提琴：

谢谢

我所做的就是将

#主图像

的高度设置为其内部图像的高度，以便按下body content div

$('#main-image').height($('#rotator img:first').height());

---

这就是你的目标吗？谢谢，但我希望“身体内容”部分出现在幻灯片下方。嗨，沃森，谢谢你，这离我们太近了。然而，当我调整窗口大小时，“主体内容”需要随着缩放图像向上移动，它目前是固定的。我会将代码放在我的答案中的一个重新调整大小的函数中，该函数在每次调整窗口大小时都会触发，并为答案添加了小提琴。太棒了！非常感谢你-我今天花了好几个小时在这上面，我一直在兜圈子！非常感谢你的帮助！！你知道为什么图像旋转器现在不工作了吗，我注意到底部部分被注释掉了？这是可行的，但只会使“主体内容”在第一次图像转换后移到下面。这与window.load有关吗？

#main-image {
  width: 100%;
  border: 1px solid blue;
}
#main-image IMG.active {
  z-index:10;
}
#main-image IMG.last-active {
  z-index:9;
}
#rotator {
  width: 100%;
  height: auto;
  position:relative;
}
#rotator img{
  position: absolute;    
  width: 100%;
  border: 1px solid red;
}
#body-content {
  margin-top: 15px;
  height: 50px;
  border: 1px solid red;
  width: 100%;
}

$('#main-image').height($('#rotator img:first').height());