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

Question

大家好，感谢大家一直在这里找到的优质答案...

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

这个 div 被设置为填充对话框空间：

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

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

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

在外部 div（创建对话框的 div）中，大小是这样计算的： width: 294.960000038147px;

但是在内部 div（填充空间的那个）中，它是四舍五入的，所以当我调整对话框大小时，它开始是不同的像素 width: 248px;

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

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

这是小提琴 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/