JQuery UI resizableで、下に固定したままのボックスを、上にリサイズする方法

Question

###実現したいこと
JQuery UI resizableで、下に固定したままのボックスを、上にリサイズしたいです。
JSというよりCSSの対応かもしれませんが、かなり難しいです。

###該当のソースコード
調べているとこのサイトに説明がありましたが、しかし下に固定ではなかったので自分で下記のように変更してみました。

ですがHTMLに書いてある通りの問題があって、リサイズすると上に浮いてしまいます。

下に固定したままで、上にだけリサイズさせるにはどうしたらいいでしょうか？

???? http://jsfiddle.net/tcxa8zeL/

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div class="wrapper">
  <p class="mes1">緑をリサイズすると上に浮いてしまうが、下に固定したままにしたい。</p>
  <div id="draggable-dealie">
    <p class="mes2">つまりこの赤いエリアは見えてほしくない</p>
    <div id="resizable-dealie">
    </div>
  </div>
</div>

<script>
//$("#draggable-dealie").draggable();
$("#resizable-dealie").resizable({
     minHeight:100,
     maxHeight:200,
     handles: 'n'
});
</script>

<style>
/* エリア */
.wrapper {
    position: fixed;
    overflow-y: scroll;
    background: khaki;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* リサイズ */
#draggable-dealie {
    position:fixed !important;
    background: red;
    width:100%;
    min-height: 100px;
    bottom: 0;
    left: 0;
    right: 0;
}
#resizable-dealie {
    min-height:100px;
    bottom: 0;
    width:100%;
    background:green;
}


/* つまみ */
.ui-resizable-handle.ui-resizable-n {
    height: 15px;
    background: lime;
}


/* 説明 */
p.mes1 {
    margin: -100px 20px 100px 20px;
}
p.mes2 {
    position: absolute;
    bottom: 0;
    text-align: center;
    color: white;
    font-weight: bold;
    width: 100%;
}
</style>

Answer 1

#resizable-dealie {
    top: 0 !important;
}

というのはお試しになりました？

追記

いや、こっちの方がいいかもですね。

#resizable-dealie {
    position: absolute;
}

Comments

[gonsy]

苦労しました。なぜそこに問題があるとわかったのですか？どういうひらめきだったのでしょうか？
あと、すみませんが、上への限界を「画面上部まで」（たとえば.wrapperの範囲までとか、指定した要素の範囲までとか）に制限する方法はわかりますでしょうか？

[Lhankor_Mhy]

> なぜそこに問題があるとわかったのですか？

CSSを見ると、position:relative で、リサイズ時に height を増やして top を減らす、という動作をしているのがわかりました。

#resizable-dealie には bottom が設定されていましたが、top と bottom が矛盾する場合、bottom が無視される( https://developer.mozilla.org/ja/docs/Web/CSS/top )ので、下部に吸着しません。
position:relative の場合、ラッパ要素も #resizable-dealie と一緒にheight が増えますから、 topの開始位置が上に上がる効果が発生する、ということが理解できました。

なので、topが変化しないように強制するか、absolute で通常のフローから外すのが有効だろう、と思いました。

> 上への限界を「画面上部まで」（たとえば.wrapperの範囲までとか、指定した要素の範囲までとか）に制限する方法はわかりますでしょうか？

#resizable-dealie {
position: absolute;
}
とした上で、
$("#resizable-dealie").resizable({
minHeight:100,
// maxHeight:200,
handles: 'n'
});
とすればいいと思います。

[gonsy]

まさに、bottomはその意図でつけましたが効かず不思議でしたが、なるほど。topが優先されるのですね。大変わかりやすいご説明に改めて感謝申し上げます。

あと範囲制限は、maxHeight指定ではなく、containment指定でできるようでしたが、ご助力ありがとうございました。

[Lhankor_Mhy]

> 範囲制限は、maxHeight指定ではなく、containment指定でできる

なるほど、当方の調べ方が甘かったですね。
ご解決されて何よりです。