使用 Javascript 将页脚保持在底部答案

【问题标题】：Keep the footer at the bottom with Javascript使用 Javascript 将页脚保持在底部
【发布时间】：2015-07-28 09:47:33
【问题描述】：

目前我正在尝试使用 Javascript 将页脚保持在底部。结果如下：

document.getElementsByTagName('body').onload = function() {KeepFoot()};
var element = document.getElementById('container');
var height = element.offsetHeight;

function KeepFoot() {
    if (height < screen.height) {
        document.getElementById("footer").style.position = "fixed";
        document.getElementById("footer").style.bottom = "0";
        document.getElementById("footer").style.left = "0";
        document.getElementById("footer").style.right = "0";
    }
}

我的想法是获取 div 容器的高度，并将其与 pc 的分辨率高度进行比较。如果div容器的高度小于PC的分辨率高度，设置为div的footerposition: fixed;

但是脚本有问题，因为它不起作用。

另一个问题，我创建的脚本可以将页脚保持在底部吗？

HTML：

<html>
    <head>
        ...
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

【问题讨论】：

为什么不使用CSS sticky footer (HTML5 version) 方法？

标签： javascript sticky-footer

【解决方案1】：

加载时未调用该函数。您可以像这样将函数 KeepFoot 直接附加到 body 标签而不是像这样调用：

 document.getElementsByTagName('body').onload = function() {KeepFoot()};

或使用下面的代码：

 (function() {
    var offsetHeight = document.getElementById('container').offsetHeight;   
    var screenHeight = screen.height;

if(offsetHeight < screenHeight){
    document.getElementById("footer").style.position = "fixed";
    document.getElementById("footer").style.bottom = "0";
    document.getElementById("footer").style.left = "0";
}
})();

【讨论】：

【解决方案2】：

如果您想要保持页面底部的页脚，您必须阅读此内容。 cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

不用js也可以。

【讨论】：

【解决方案3】：

"DOMContentLoaded" 事件仅在文档准备好时触发，类似于 jquery 的$(document.ready)。

而且，对于样式，您可以使用 class 而不是使用 javascript 设置每种样式。

代码

document.addEventListener("DOMContentLoaded", function (event) {
    var element = document.getElementById('container');
    var height = element.offsetHeight;
    if (height < screen.height) {
        document.getElementById("footer").classList.add('stikybottom');
    }
}, false);

#footer.stikybottom {
    position: fixed;
    bottom:0;
    left: 0;
    right:0;
}

<div id="container">
    <div id="header">header</div>
    <div id="content">Conent</div>
    <div id="footer">Something in footer</div>
</div>

【讨论】：

请说明您的代码是做什么的以及为什么要这样写。仅代码的答案通常不受欢迎。
感谢 jed-panda，现在可以使用了。并感谢您添加课程的建议。
如果屏幕高度太小而无法容纳页脚 + 内容，这将不起作用。

【解决方案4】：

我认为您的功能运行良好。也许缺少的是函数调用。

function KeepFoot() {
    if (height < screen.height) {
        document.getElementById("footer").style.position = "fixed";
        document.getElementById("footer").style.bottom = "0";
        document.getElementById("footer").style.left = "0";
        document.getElementById("footer").style.right = "0";
    }
}

KeepFoot();

看到这个jsfiddle

【讨论】：