jquery的顶部和底部分割屏幕，限制页面的下半部分

Question

我有一个顶部和底部之间有一条线来调整大小（提供更多的房地产顶部或底部）。

基本上是一个分屏布局。但是我有一个问题让底部正确，无论我做什么，总是延伸到页面之外，我希望底部的框完全像它在页面的顶部一样执行。

下面的演示将基本告诉你我在做什么，以及我的问题：

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

我没有任何硬编码的高度（一切目前被设定％ ），但我把它们添加到小提琴演示我的问题。

现在调整顶部和底部的分隔线正在调整顶部的大小，并且我有一些来自jQuery UI Resizable alsoResize reverse的代码来反向调整底部的大小。我不确定我甚至需要额外的代码，但是当我无法解决这个问题时，我认为这值得一试。

另外，为了让jquery UI处理正确，顶端有一个大的底部边缘，这可能会导致我的问题，但玩它似乎并没有摆脱这个问题。

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

Answer 1

你的问题是，你试图将一个固定大小的几个div分成一个更大的固定大小div，但其他div不适合。你不能指望文本调整大小，当你调整大小手柄，使其适合，divs必须去的地方，所以他们overflow。这里有几个建议：

• 给容器auto（所以当你调整它，它太大，不适合，它会自动给你一个滚动条）的CSS overflow值
• 设置溢出值，摆脱缩放器的完全
• 给容器auto或scroll一个css height值（如果大小不是问题）