Question

[更新]

我实际上通过前面的固定页脚设计妥协了这个问题。

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

我希望其他人最终会提供一个包含两全其美的伟大解决方案。

<小时/> 我花了一整天的时间试图让页脚向下移动以适应动态添加（通过ajax）内容。我真的需要一些指针或链接，因为我没有发现任何有用的东西。

基本上

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

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

同样的css布局适用于其他内容扩展到浏览器窗口下方的页面。

捕获：

必须呈现内容并将其与初始加载一起传递给浏览器。

问题：

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

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

感谢。

Answer 1

听起来您的页脚正在使用display: fixed或类似内容。尝试将页脚的容器更改为：

bottom: 0;
display: block;
position: absolute;

这将确保它出现在它所在的任何容器的底部（我假设<body>标签）。您的问题现在变得确保它出现在屏幕的底部而不是文档的底部，而文本的底部要短得多。您可以通过几种方式完成此任务，但也许最简单的方法是在AJAX内容容器上设置最小高度：

min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */

另一种方法是因为你正在使用JavaScript库（我假设？）来获取所需的内容，也许你也可以调整AJAX内容容器的高度，或者在内容加载后更改页脚的CSS？ / p>

Answer 2

目前修复类似小jQuery和CSS的情况，其中参数是footer div对象（即$（“＃mainfooter”））：

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

将此函数绑定到$（document）.ready和$（window）.resize。如果ajax调用调整了body的大小，那么在内容加载后也应调用它。

Answer 3

没有任何代码，很难说出问题可能是什么。

但是，我使用粘性页脚as described here虽然我没有在其中添加ajax内容但效果很好。浏览器调整大小的效果很好。

Answer 4

在PHP中使用include并在动态内容出现后调用页脚。

Answer 5

我不确定你是不是在寻找这个，但是我也面临同样的问题，同样的CSS，当我通过jQuery方法调用ajax时，我的内容在页脚上重叠。

现在我找到了解决方案：只需通过jQuery获取div高度，然后将高度应用于从ajax返回结果的div。

var obj = $("#viewcomm").height(); 
if($.browser.msie) {
  $("#viewcomm").height(obj).css({cursor:"auto"});
}

这里viewcomm是div ID。

Answer 6

我用以下代码解决了同样的问题，其中content是div的id，其中php页面加载和页脚是页脚标记。

var footerAdjustId = setInterval(adjustFooter, 2000);

function adjustFooter(){
    $("footer").css("marginTop", $("#content").height() - $(window).height());
    clearInterval(footerAdjustId);
}

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

6 个答案: