Javascript 需要填充内容和页脚之间的剩余高度空间答案

【问题标题】：Javascript needed to fill remaining height space between content and footerJavascript 需要填充内容和页脚之间的剩余高度空间
【发布时间】：2012-03-05 15:52:01
【问题描述】：

如何设置“间隔” div 以填充 CONTENT 和 FOOTER 之间的剩余高度空间，因此页脚将始终位于页面底部（而不是最初要求的窗口）？这是一个页脚不在窗口底部的示例：http://template1.staceyapp.com/（我正在使用此模板，因此结构相同）。我尝试了很多事情，比如创建一个 div 并将其设置为最小高度、高度 100% 等。可能需要Javascript。你能帮我设置 jQuery 来计算它的高度来填充剩余空间吗？有没有更好的解决方案？

提前非常感谢，格拉克萨

【问题讨论】：

你的要求让我很困惑。您不希望它出现在窗口底部，而只是希望它在内容结束后显示？这就是块级元素默认执行的操作。只需在容器 div 之后添加页脚，它就会按照您的意愿工作。

标签： javascript jquery html height

【解决方案1】：

您可以使用 CSS 将页脚定位在页面底部。

通过使用position: fixed 或者如果页脚包含在另一个 div（容器）中将其中的position 设置为relative，将页脚的position 设置为absolute，然后为页脚指定bottom: 0;，以使其锁定在页面底部。

【讨论】：

感谢您的帮助，但当我说“窗口底部”时，我写错了。我的意思是在页面的底部。这是因为会有一些页面比窗口长（高度）。在这种情况下，我只希望页脚位于所有内容下方，而不是窗口的固定底部。还是谢谢！

【解决方案2】：

听起来您想要一个粘性页脚，它位于浏览器窗口的底部或内容的底部，以较长者为准。

如果是这样，请查看：http://ryanfait.com/sticky-footer/

【讨论】：

我之前测试过，但是设置'html, body { height: 100%; }'破解我的css渐变背景。渐变假定为正文大小或窗口大小（较小的那个）的 100%，并不断重复直到页面结束。谢谢。
这是我正在开发的真实网站，您知道：helenrodel.com.br/future/oliver/?/collections

【解决方案3】：

您是否尝试将页脚设置为位置：固定在底部？

【讨论】：

正如马克沃尔特斯回答我希望它在页面底部而不是窗口底部。感谢您与我一起思考。
那么你只需要将页脚放在一个自己的 div 中，该 div 直接跟在你的 content-wrapper-div 之后