使用Javascript将页脚保持在底部

时间:2015-05-16 14:37:26

标签: javascript sticky-footer

目前我正试图用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容器的高度,并将其与电脑分辨率的高度进行比较。如果div容器的高度小于PC分辨率的高度,则设置为div页脚position: fixed;

但是脚本中存在问题,因为它无法正常工作。

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

HTML:

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

4 个答案:

答案 0 :(得分:2)

我觉得你的功能非常好用。也许缺少的是函数调用。

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

答案 1 :(得分:2)

"DOMContentLoaded"事件仅在文档准备就绪时触发,类似于jquery&#39; s $(document.ready)

并且,对于样式,您可以使用类而不是使用javascript设置每个样式。

<强>代码

&#13;
&#13;
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);
&#13;
#footer.stikybottom {
    position: fixed;
    bottom:0;
    left: 0;
    right:0;
}
&#13;
<div id="container">
    <div id="header">header</div>
    <div id="content">Conent</div>
    <div id="footer">Something in footer</div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:2)

该功能未在加载时调用。您可以将函数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";
}
})();

答案 3 :(得分:0)

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

你可以不用js来做。