css - 使用对话框调整嵌套在 jQuery UI 对话框中的 div 大小？

Question

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

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

在 jQuery UI 或什至只是纯 CSS 中执行此操作的最简单方法是什么？

Answer 1

我找到了一种不使用任何 JavaScript 的方法。它甚至不涉及任何黑客攻击；只是普通的 CSS3。在这里 fiddle :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 中运行良好。未在早期版本中测试。