我的jQuery UI对话框包含两个div元素.一个具有固定的高度,并应始终对齐在底部.另一个应该占用剩余的空间.
基本上,我希望蓝色中突出显示的所有尺寸在调整大小时保持不变.换句话说,红色div在两个维度上调整大小,但是绿色div保持高度.
在jQuery UI中甚至是简单的CSS,最简单的方法是什么？
解决方法
我找到了一种不使用任何
JavaScript的方法.它甚至不涉及任何黑客;只是普通的CSS3.小提琴：
http://jsfiddle.net/nty5K/16/
基本上,两个div都是位置：绝对的,并且使用顶部,底部,左侧和右侧属性单独地锚定每个边.顶部div具有指定的所有四个位置,使其与容器调整大小,同时保留到容器每个边缘的确切距离.底部的div具有固定的三个位置,而顶部仅通过固定高度间接定义.
实际上,div需要被放入一个包含div的位置,相对的,否则顶部/底部的div将相对于body元素定位.
不确定浏览器兼容性,但这在Firefox 10,IE9和Chrome 17中工作正常.没有在早期版本中测试.
