javascript - 调整外部div大小时如何避免内部div溢出？

Question

当我调整外部 div(main) 的大小时，

innerMain 会自动调整大小。我希望 header 和 footer 都保留在 main div 的顶部和底部。两者都应该是 block 元素 - display=block - 并且仅在 main 更改时调整 innerMain 的大小。我当前的解决方案导致底部溢出。有人可以帮助我将所有内部 div 放入外部 div 并避免溢出吗？

我无法使用 jQuery UI Resizable 的调整大小选项，因为在绘制外部 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();

fiddle :http://jsfiddle.net/gHLgt/18/