带有jQuery的顶部和底部分屏，将底部限制到页面

Question

我有一个顶部和一个底部，两者之间有一条线可以调整大小（使顶部或底部有更多房地产）。

基本上是分屏布局。 但是我有一个问题，无论我做什么，它都始终超出页面的范围，我希望底部的框能够像在页面的顶部一样准确地执行操作。

以下演示基本上将向您展示我在做什么以及我的问题：

http://jsfiddle.net/mstefanko/e38bE/67/

我没有任何硬编码的高度（当前所有值均由％设置），但我将它们添加到了小提琴中以演示我的问题。

现在，用于调整顶部和底部大小的分隔线正在调整顶部的大小，并且我从jQuery UI Resizable中获得了一些代码。 我不确定我是否还需要额外的代码，但是当我无法解决这些问题时，我觉得值得一试。

另外，为了使jquery ui句柄正确，在顶部有一个较大的底部空白，这可能是造成我的问题，但是使用它似乎并没有解决这个问题。

任何帮助表示赞赏，谢谢！

Answer 1

您的问题是，您试图将固定大小的多个div压缩为一个更大的固定大小的div，但其他div不适合。 当您移动调整大小手柄以使其适合时，您不能指望文本会调整大小，并且div必须放到某个地方，因此它们会溢出 。 这里有一些建议：

• 给容器一个auto的css overflow值（因此，当您调整它的大小并且太大而无法容纳时，它将自动为您提供滚动条）
• 设置溢出值并完全摆脱大小调整器
• 给容器一个css height值， auto或scroll （如果大小不成问题）