1

私はこのような状況にあります...ポップアップウィンドウとして機能するオーバーレイdivを作成しました。テキストを含む小さなヘッダーと、それを「閉じる」ための「X」ボタン (子 div) が含まれています。次に、ボディ コンテンツを別の子 div として持ちます。

ドラッグ可能でサイズ変更可能な jquery 機能を親オーバーレイ ポップアップ ウィンドウに設定しました。正常に動作します...大きなコンテンツのために下にスクロールすると、最初の場所のように下部に固定されるのではなく、スクロール方法に応じて小さなハンドラーのサイズ変更アイコンが上下に移動するためです。

もう 1 つのことは、その親内の小さな子の 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 に答える