調整外部div的大小時如何避免內部div溢出？

Question

當我調整外部div（ main ）的大小時， innerMain會自動調整大小。 我希望header和footer都保留在main div的頂部和底部。 兩者都應該是block元素– display = block –並且僅在進行main更改時才調整innerMain大小。 我當前的解決方案導致底部溢出。 有人可以幫助我將所有內部div放入外部div並避免溢出嗎？

我無法使用jQuery UI Resizable的resize選項，因為繪制外部div時我不知道內部div的Dom元素。 （最終Dom結構不可用）。 計算任何像素大小對我來說也不是解決方案。

jsfiddle鏈接： http : //jsfiddle.net/gHLgt/16/

Answer 1

您可以通過以下添加/編輯來解決一些問題：

.main { position: relative; }
.footer { position: absolute; bottom: 0; width: 100%; }

然后將您的jquery應用於內部div而不是外部包裝器：

$(".innerMain").resizable();

小提琴： http : //jsfiddle.net/gHLgt/18/