在jQuery UI对话框中嵌入一个div，用对话框调整大小？

Question

我的jQuery UI对话框包含两个div元素。一个具有固定的高度，应始终在对话框的底部对齐。另一个应该占用剩下的空间。

基本上我希望所有以蓝色突出显示的尺寸在调整大小时保持不变。换句话说，红色div在两个维度上调整大小，但绿色div保持其高度。

在jQuery UI中甚至只是普通的CSS，最简单的方法是什么？

Answer 1

我找到了一种不使用任何JavaScript的方法。它甚至不涉及任何黑客攻击;只是普通的CSS3。在这里小提琴：http://jsfiddle.net/nty5K/16/

基本上，两个div都是position: absolute，每个边都使用top，bottom，left和right属性单独锚定。顶部div指定了所有四个位置，使其与容器一起调整大小，同时保留与容器每个边缘的精确距离。底部div有三个固定位置，而顶部仅通过固定高度间接定义。

在实践中，需要将div放入具有position: relative的包装div中，否则顶部/底部div将相对于body元素定位。

还不确定浏览器兼容性，但这在Firefox 10，IE9和Chrome 17中运行良好。未在早期版本中测试过。

Answer 2

企业防火墙阻止了图片，所以我根据其他评论来猜测你的目标。

编辑： 现在，我可以看到你所追求的是什么，我已经相应地更新了我的小提琴。包括以下代码的完整性。

我会编写一个函数来计算对话框的大小，减去固定div的高度，并将动态div的高度设置为此计算值。然后我将对此函数的调用绑定到对话框的resize事件。 Here是一个小提琴，可能需要对你的确切布局进行一些调整，但应该关闭。

值得注意的是，某些浏览器在滚动/调整大小事件中可能无法正确计算，在调整大小事件完成后使用setTimeout将计算排队解决问题，尽管它确实会进行更改调整大小正在进行时有点跳跃。请参阅此question并回答详细信息。

function SetDivHeight() {
    var $DynamicDiv = $('div.dynamic');
    var $FixedDiv = $('div.fixed');
    var $Container = $(window); //Update for containing element

/*Calculate the adjustment needed to account for the margin and 
border of the dynamic div.*/
    var HeightAdjustment = $DynamicDiv.outerHeight(true) - $DynamicDiv.height();

/*Get the values of the top and bottom margins which overlap 
between the two divs.*/
    var DynamicBottomMargin = parseInt($DynamicDiv.css('marginBottom'));
    var FixedTopMargin = parseInt($FixedDiv.css('marginTop'));

/*Adjust for the overlapping top/bottom margin by subtracting 
which ever is smaller from the adjustment value.*/
    if (DynamicBottomMargin >= FixedTopMargin) {
        HeightAdjustment -= FixedTopMargin;
    } else {
        HeightAdjustment -= DynamicBottomMargin;
    }


/*subtract the height of the fixed div from the height of the 
container, subtract the calculated height adjustment from that 
value, and set the result as the height of the dynamic div.*/
    $DynamicDiv.height(($Container.height() - $FixedDiv.outerHeight(true)) - 
HeightAdjustment);
/*May need to use $Container.innerHeight instead, if container 
is not a window element.*/
}

var t;

function QueueSetDivHeight() {
    if (t) {
        clearTimeout(t);
    }
    t = setTimeout(function() {
        SetDivHeight();
    }, 0);
}

$(document).ready(function() {
    SetDivHeight();
    $(window).resize(QueueSetDivHeight);
    //Bind to resize of container element instead/as well
});

Answer 3

只是CSS ... check it out!

将margin设置为容器，将margin-top设置为底部固定div。不需要jQuery。