javascript - 多次调整对话框大小后，jQueryUI 对话框内的 DIV 溢出

Question

大家好，谢谢大家为我提供的优质答案，我总是在这里找到......

我有一个 jQueryUI 对话框，里面有一个 DIV...

此 div 设置为填充对话框空间:

div.dialog-contents {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
}

当我开始调整对话框大小(水平或垂直)时，它会慢慢开始缩小或放大到超出对话框边界!!!...这很奇怪...

当我使用调试工具检查元素时，我注意到:

在外部 div(创建对话框的 div)中，大小的计算方式如下: 宽度:294.960000038147px;

但是在内部 div(设置为填充空间的那个)中它是圆 Angular 的，因此当我调整对话框大小时它开始是不同的像素 宽度:248px;

我不知道我做错了什么，我应该使用其他设置来完成此操作吗？

我只是希望我的内部 div 始终为 100% 宽度和 100% 高度(并保持在对话框边界内)

这是 fiddle http://jsfiddle.net/e9QjD/2/

尝试多次调整对话框大小以查看行为

非常感谢!

Answer 1

以下是一种可能的解决方法。

我确实发现您的window-session-editor的高度存在问题，每次调整大小时，高度相对于模式都会略有增加。我看不出宽度变化的问题。我不确定为什么会发生这种情况，但解决方法是在每次调整大小后重新调整高度。

$(function () {   
    $("#window-session_editor").dialog({
        resizeStop: function( event, ui ) {
            $(this).height($(this).parent().height()-$(this).prev('.ui-dialog-titlebar').height()-34);
        }    
    }); 
});

http://jsfiddle.net/e9QjD/3/

更新寻址宽度

$(function () {   
    $("#window-session_editor").dialog({
        resizeStop: function( event, ui ) {
            $(this).height($(this).parent().height()-$(this).prev('.ui-dialog-titlebar').height()-34);
            $(this).width($(this).prev('.ui-dialog-titlebar').width()+2);
        }    
    }); 
});

http://jsfiddle.net/e9QjD/4/