Question

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

我有一个带有DIV的jQueryUI对话框......

此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/

DIV内部jQueryUI对话框在多次调整对话框后溢出

1 个答案: