javascript - 使用 jquery 的顶部和底部分屏，将下半部分限制在页面上

Question

我有一个顶部和一个底部，中间有一条线可以调整大小(给顶部或底部更多的空间)。

基本上是分屏布局。但是我在正确设置底部部分时遇到问题，无论我做什么，它总是超出页面范围，我希望底部的框与页面顶部的框完全一样。

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

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

我没有任何硬编码的高度(目前一切都由 %'s 设置)，但我将它们添加到 fiddle 中以演示我的问题。

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

此外，为了使 jquery ui 句柄正确，顶部有一个很大的底部边距，这可能是我的问题所在，但使用它似乎并没有解决这个问题。

感谢任何帮助，谢谢!

Answer 1

您的问题是您试图将几个固定大小的 div 压缩成一个更大的固定大小的 div，但其他 div 不适合。当您移动调整器 handle 以使其适合时，您不能指望文本会调整大小，而且 div 必须去某个地方，所以它们 overflow .这里有一些建议:

• 给容器一个 css overflow 值 auto(所以当你调整它的大小时它太大而不适合，它会自动给你一个滚动条)
• 设置溢出值并完全摆脱调整器
• 为容器提供 auto 或 scroll 的 css height 值(如果大小不是问题)