Javascript 可调整大小的处理程序在覆盖弹出div向下滚动后移动

我处于这种情况下。。。我制作了一个叠加div作为弹出窗口。 包含一个包含一些文本的小标题和一个“X”按钮来“关闭”它（这是一个子div）。然后它将主体内容作为另一个子div

我已经将可拖动和可重新调整大小的jquery功能设置为父覆盖弹出窗口。 工作很好。。。可以这么说，因为当我因为内容太大而向下滚动时，小的调整大小图标会根据我滚动的方式向上或向下移动，而不是像最初一样固定在底部

还有一件事，其父对象中的小子div不会随着父对象的大小而调整大小。我怎样才能做到这一点

这是我的HTML代码：

<div id="sendmessage-panel-overlay">
    <div id="overlay-header">
        <h1 id="title" style="font-size: 12px; float: left; padding-top: 7px;"></h1>
        <div id="maximize_icon">
            <img src="<c:url value='/images/x-icon.gif'/>" title="Close window" onclick="closePopUp()">
        </div>              
    </div>
    <div id="body-content"></div>
</div>

---

将元素移动到可滚动元素的外部或使用

位置：绝对

（可能与

位置：相对

某处组合）。

将元素移动到可滚动元素的外部或使用

位置：绝对

（可能与

位置：相对

某处组合）

#sendmessage-panel-overlay
{
    background-color: white;
    border-color: gray;
    border-style: solid;
    border-width: 1px;
    float: left;
    height: 500px;
    left: 21%;
    padding: 0px 17px 17px;
    position: fixed;
    text-align: center;
    top: 10%;
    visibility: hidden;
    width: 700px;
    overflow: auto;
}

#overlay-header
{
   width: 700px; 
   position: fixed; 
   height: 30px; 
   background-color: #fff; 
}

#maximize_icon {
    width: 16px;
    height: 16px;
    float: right;
}

#body-content {
    padding-top: 50px;
    padding-left: 10px;
    display: inline-block;
}