使用Javascript将页脚保持在底部

Question

使用Javascript将页脚保持在底部

目前我正试图用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";
    }
}

Run Code Online (Sandbox Code Playgroud)

我的想法是取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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

jad*_*nda 3

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

并且，对于样式，您可以使用类，而不是使用 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);

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，6 月前
查看次数：	10262 次
最近记录：	10 年，6 月前