jQuery 可调整大小的奇怪行为

Question

具有奇怪行为的工作演示：http://crawfordcomputing.com/AkadineWebOS/#/

如果你抓住右边的 div 窗口边框并水平调整大小，它会在垂直方向变得不稳定。您可以使用图标打开的所有窗口也是如此。一切都是可拖动的，而且 Jetris 可以工作。 （查看链接了解信息）

这是一个 Angular 单页应用程序。我的 div 窗口已定义：

<div ng-repeat="pane in panes">
    <div id="{{pane.windID}}" style="position: absolute; top: {{pane.x}}; left: {{pane.y}}; border: 2px solid black; min-height: 70; overflow: hidden">
        <div style="padding:2px; overflow: auto; background-color: grey; border: 1px solid black">
            <span style="float: left; text-align: left" ng-bind="pane.title"></span><span style="float: right; text-align: right" ng-click="closeWindow(pane.objID)">X</span>
        </div>
        <div compile="pane.content" style="background-color: white; padding: 5px; border: 1px solid black; overflow: auto;"></div>
    </div>
</div>

所以窗口 div id="{{pane.windID}}" 有两个孩子，一个标题栏和一个内容窗格。因此，在调整窗口大小时，我尝试 asloResize 内容窗格。这很奇怪，因为它没有考虑标题栏。所以我这样做了：（如果没有在函数中定义，所有变量都是之前定义的）

objParent.resizable({
                handles: "n, e, s, w",
                minWidth: 250,
                minHeight: fullHeight, 
                //fullHeight is parents height, don't wanna colapse one liners
                //titlebar (child0) resizes just fine due to floating
                //child0 size bugs alsoResize child1, let's also it manually
                resize: function (event, ui){ 
                    //subtact title height from parents height
                    contentHeight = objParent.innerHeight() - objChild[0].innerHeight();
                    //width is fine
                    contentWidth = objParent.innerWidth();
                    objChild[1].css({'width':contentWidth, 'height':contentHeight});
                }
            });

现在看到，在调整大小时，我还想只调整内容窗格的大小，而不是标题栏。所以我试图手动设置内容窗格的大小，宽度很好，但内容窗格高度等于父高度减去标题栏高度。

问题在于，如果您先水平调整大小，垂直方向就会变得不稳定。一旦你抓住底部并垂直调整大小，错误就会消失，然后你可以随意调整大小，完全没有问题。仅当您先水平调整大小时才会发生这种情况。

为什么会这样？我怀疑这个错误实际上是在可拖动的调整大小功能中，因为你可以通过先垂直调整大小来阻止这个错误，然后它就可以完美运行了。这发生在所有浏览器上。

有人知道吗？

Answer 1

id 为 window100-obj951 的 div 最初没有设置 CSS 高度。包含compile="pane.content" 的 div 也没有。

垂直调整大小会改变这两个 div 的 CSS 高度属性。

水平调整大小会改变两者的宽度，但只会改变包含的 div 的高度。

包含的div有overflow:hidden，所以如果设置了它的高度，那么包含的div的高度就不重要了。因此，设置包含 div 的高度掩盖了包含 div 的高度实际上被更改为不稳定的事实。

[所有这些都可以使用 Firebug 并在调整大小时检查元素]