底部页脚的CSS布局，动态ajax内容改变页面高度

Question

[更新]

我实际上通过放弃固定页脚设计暂时解决了这个问题。

动态内容移动页脚和适当调整容器大小似乎没有问题，除非页脚最初固定在浏览器底部。

我希望其他人最终能提供一个兼具两全其美的出色解决方案。

---

我花了一整天的时间试图让页脚向下移动页面以适应动态添加(通过 ajax)的内容。我真的需要一些指示或链接，因为我还没有找到任何有用的东西。

基本上:

我的网站有一些页面以一个文本框和一个按钮开头，因此内容区域的总高度仅比标题区域低几英寸。

让粘性页脚工作没有任何问题，即使屏幕上的内容很少，页脚也会出现在浏览器窗口的底部。

相同的 css 布局适用于内容延伸到浏览器窗口下方的其他页面。

要点:

内容必须在初始加载时呈现并传递给浏览器。

问题:

在初始加载后通过 AJAX 添加到页面的任何内容都会正确绘制页面——但页脚仍保留在其初始位置。

请告诉我有解决办法。在先与我的老板核实之前我不能发布 css - 如果可能的话 - 如果需要，我稍后会发布 - 但它只是网络上 float 的许多粘性页脚 css 解决方案的一个非常基本的版本。

谢谢。

Answer 1

目前修复了小型 jQuery 和 CSS 的类似情况，其中参数是页脚 div 对象(即 $("#mainfooter")):

function positionFooter(obj){
    if ($("body").outerHeight(true) > $(window).height()) {
        obj.css("position","relative");
    } else {
        obj.css("position","fixed");
        obj.css("bottom","0px");
    }
 }

将此函数绑定(bind)到 $(document).ready 和 $(window).resize。如果 ajax 调用调整正文大小，这也应该在内容加载后调用。