带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＆amp; IE9（现在没有IE8）。 它通过设置绝对定位对象的顶部，左侧，右侧和底部来使用锚定。你需要改变jquery UI样式以包括固定的位置，否则对话框内的绝对定位被搞砸了： - ）

如果您需要更多帮助，请注意，希望我能为您解决此问题。

Answer 2

我不知道jQuery对话，它会产生什么影响，但是：

如果您使用直接标记执行此操作，请确保#dialog和#commentList在CSS中没有声明的高度。然后给#newComment一个特定的高度（例如45px）。普通的HTML流将使其他两个div（#dialog和#commentList）根据需要增长。也就是说，默认情况下，它们的高度设置为“自动”。

如果jQuery对话框覆盖了此默认值（您可以通过使用Firebug或显示计算样式的类似开发人员工具来判断），您可能需要重新声明'height：auto;'对那些选择者。