有没有简单(足够)的方法来使用 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 解决方案?
最佳答案
你可以试试这个: jsFiddle sample
它适用于 chrome 和 IE9(目前没有 IE8)。 它通过为绝对定位的对象设置顶部、左侧、右侧和底部来使用锚定。您确实需要更改 jquery UI 样式以包含固定位置,否则对话框内的绝对定位是错误的:-)
如果您需要更多帮助,请发表评论,希望我能给您带来解决此问题的另一种想法。
关于css - 带有 CSS 的可调整大小的 jQuery 对话框中的垂直灵活框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9327926/