Question

我正处于这种情况......我已经将叠加div作为弹出窗口。包含一个带有一些文本的小标题和一个“关闭”它的“X”按钮（这是一个子div）。然后它将身体内容作为另一个孩子div。

我已将可拖动且可重新调整大小的jquery功能设置到父叠加弹出窗口。工作正常......有点说话，因为当我因大内容向下滚动时，小处理程序调整大小图标会根据我滚动的方式向上或向下移动，而不是像在第一个位置那样固定在底部。 / p>

另外一件事，其父母内部的小孩divs没有调整父母的大小。我怎样才能做到这一点？

这是我的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>

这就是CSS：

#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;
}

Answer 1

将元素移动到可滚动元素之外或使用position: absolute（可能在某处与position: relative组合）。

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

1 个答案: