在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需要放入包装div中position: relative,否则顶部/底部div将相对于body元素定位.

还不确定浏览器的兼容性,但这在Firefox 10,IE9和Chrome 17中运行良好.没有在早期版本中测试过.