jQuery动态元素高度覆盖浏览器高度答案

【问题标题】：Jquery Dynamic element height to cover browser heightjQuery动态元素高度覆盖浏览器高度
【发布时间】：2010-08-16 23:14:59
【问题描述】：

我的布局如下。

可调整大小元素的高度应保持为覆盖整个浏览器高度。

几点

我已经开始编写基于脚本的浏览器调整大小事件。但无法得出合适的逻辑。如果在 Top 元素 或 Bottom 元素

中添加新内容，resize 元素也不会覆盖事件

我尝试搜索布局插件，但对我来说有点矫枉过正。

如果没有解决方案，建议会有所帮助。谢谢。

【问题讨论】：

【解决方案1】：

我不太确定我是否理解您的要求，因为听起来您可以使用 CSS 执行此操作 - 除非我误解您的目标，否则使用 jQuery 执行此操作只会使事情变得过于复杂。

您的“要调整大小的元素”需要分配 100% 的高度，并且所有其他包含元素也需要分配 100% 的高度。这有点棘手，但还不错。

查看这些关于 100% 高度的教程：

然后顶部元素和底部元素 div 可以根据其中是否有内容来隐藏（.hide()）或显示（.show()）。这是否为您指明了正确的方向？

【讨论】：

我发现自己使用相同的技巧稍作修改。我在顶部提供了正填充，在底部提供了负填充以获得粘性页眉和页脚。我最终使用 jQuery 来匹配#LeftSide 和主要内容的高度。