Javascript 如何在调整外部div的大小时避免内部div溢出？

当我调整外部div（

main

）的大小时，

innerMain

会自动调整大小。我希望

header

和

footer

都保持在

main

div的顶部和底部。两者都应该是块元素–display=block–并且仅在

main

更改时调整

innerMain

的大小。我当前的解决方案导致底部溢出。有人能帮我把所有的内div装到外div里，避免溢出吗

我不能使用jqueryui resizeable的resize选项，因为我在绘制外部div时不知道内部div的Dom元素（最终Dom结构不可用）。计算任何像素大小对我来说也不是一个解决方案

---

jsiddle link:

这里有一些问题可以通过添加/编辑来解决，如下所示：

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

然后将jquery应用于内部div而不是外部包装器：

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

小提琴：