使用CSS的可调整大小jQuery对话框中的垂直柔性框
提问于 2012-02-17 04:07:38
是否有简单(足够)的方法来实现我想要使用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，那么可能有一个优雅的JS解决方案吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-02-17 06:20:54
你可以试试这个：jsFiddle样品
它在chrome & IE9中工作(现在没有IE8 )。它通过为绝对定位对象设置上、左、右和下设置来使用锚定。您确实需要更改jquery样式，以包含固定位置，否则对话框中的绝对位置就会被拧成:-)
如果你需要更多的帮助，希望我给你带来另一个解决这个问题的想法。
Stack Overflow用户
发布于 2012-02-17 05:53:15
我不知道jQuery对话的情况，也不知道它会产生什么效果，但是：
如果您使用的是直接标记，请确保#对话框和#评论员在CSS中没有声明的高度。然后给#newComment一个特定的高度(例如，45)。正常的HTML流将有另外两个div(#对话框和#评论员)根据需要增长。也就是说，默认情况下，它们的高度设置为“自动”。
如果jQuery对话正在覆盖此默认设置(您可以通过使用Firebug或显示计算样式的类似开发人员工具来判断)，那么您可能需要在这些选择器上重新声明‘those : auto;’。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9327926
复制相关文章
腾讯云开发者
