css - 带有 CSS 的可调整大小的 jQuery 对话框中的垂直灵活框

Question

有没有简单(足够)的方法来使用 CSS 实现我想要的布局？

       jQuery dialog:

== Heading ==================
|                           |
|        Comment list       |    <-- Flexible height
|                           |
-----------------------------
|     New comment input     |    <-- Fixed height
|================ [close] ==|

布局是一个 jQuery 对话框，有两个垂直堆叠的区域:评论列表和新评论输入。该对话框是可调整大小的，当它的高度增加或缩小时，我希望评论列表的高度相应地改变。新的评论输入区域高度保持固定。

基本上，我希望评论列表是对话框的高度减去输入区域的高度。

建议的布局是(尽管您可以更改它):

<div id="dialog">
    <div id="commentsList">
    </div>
    <div id="newComment">
    </div>
</div>

那么我能否使用 CSS 实现此目的，使其在 IE8+ 和其他浏览器中工作？或者因为我已经在使用 jQuery UI，那么也许有一个 elegenat JS 解决方案？

Answer 1

你可以试试这个: jsFiddle sample

它适用于 chrome 和 IE9(目前没有 IE8)。它通过为绝对定位的对象设置顶部、左侧、右侧和底部来使用锚定。您确实需要更改 jquery UI 样式以包含固定位置，否则对话框内的绝对定位是错误的:-)

如果您需要更多帮助，请发表评论，希望我能给您带来解决此问题的另一种想法。