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 =＆＃34; {{pane.windID}}＆＃34;有两个孩子，一个标题栏和一个内容窗格。因此，在调整窗口大小时，我尝试了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});
                }
            });

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

问题是如果你先水平调整大小，那么垂直方向会变得很糟糕。一旦你抓住底部并垂直调整大小就会消失，你就可以调整大小然后完全没有问题。只有先水平调整大小才会发生这种情况。

为什么会这样？我怀疑这个bug实际上是在draggable resize函数中，因为你可以通过首先垂直调整来阻止bug，然后它完美无缺。这发生在所有浏览器上。

有没有人有线索？

Answer 1

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

垂直调整大小会更改这两个div的css height属性。

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

包含div有overflow:hidden，因此如果设置了高度，则包含的div的高度不重要。因此，拥有包含div的高度掩盖了所包含的div的高度实际上被改变为不稳定的事实。

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

jQuery可调整大小的奇怪行为

1 个答案: