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

【问题标题】：css layout for footer at bottom with dynamic ajax content changing height of page底部页脚的css布局，动态ajax内容改变页面高度
【发布时间】：2014-01-08 19:38:07
【问题描述】：

[更新]

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

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

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

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

基本上：

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

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

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

问题：

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

问题：

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

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

谢谢。

【问题讨论】：

标签： css ajax layout

【解决方案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");
    }
 }

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

【讨论】：

【解决方案2】：

听起来您的页脚正在使用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？

【讨论】：

我认为您一定是在暗示解决方案 - 不幸的是，这意味着我不能只依赖 css。您提供的 css 并不能解决问题 - 但我将不得不通过代码修改容器高度的想法可能更符合要求。

【解决方案3】：

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

但是，我使用了一个粘性页脚as described here，虽然我没有在其中添加 ajax 内容，但效果非常好。浏览器调整大小工作正常。

【讨论】：

【解决方案4】：

在PHP中使用include，在动态内容出现后调用footer。

【讨论】：

【解决方案5】：

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

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

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

这里 viewcomm 是 div ID。

【讨论】：

【解决方案6】：

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

var footerAdjustId = setInterval(adjustFooter, 2000);

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

【讨论】：