1

我在这种情况下......我已经制作了一个覆盖 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>

这是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;
}
4

1 回答 1

1

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

于 2013-05-10T16:51:51.103 回答