使用 Javascript 将页脚保持在底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30276950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep the footer at the bottom with Javascript
提问by Keaire
At the moment I'm trying to keep the footer at the bottom with Javascript. This is the result:
目前我正在尝试使用 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";
}
}
My idea was to take the height of the div container and compare it with the height of the resolution of the pc. If the height of the div container is smaller than the height of the resolution of the PC, set to the div footer position: fixed;
我的想法是取div容器的高度并将其与PC分辨率的高度进行比较。如果div容器的高度小于PC分辨率的高度，设置为div页脚position: fixed;
But there is a problem in the script because it doesn't work.
但是脚本中存在问题，因为它不起作用。
Another question, the script that I created would be fine for keep the footer at the bottom?
另一个问题，我创建的脚本可以将页脚保持在底部吗？
HTML:
HTML：
<html>
<head>
...
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
采纳答案by jad-panda
"DOMContentLoaded"event only fires when document is ready similar to jquery's $(document.ready).
"DOMContentLoaded"事件仅在文档准备就绪时触发，类似于 jquery 的$(document.ready).
and, for styles you can use class instead of setting each style using javascript.
并且，对于样式，您可以使用 class 而不是使用 javascript 设置每个样式。
Code
代码
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>回答by Ganesh Uppinivalasa
The function is not being called on load. You can attach the function KeepFoot directly to the body tag like this Instead of calling like this:
加载时未调用该函数。您可以像这样将函数 KeepFoot 直接附加到 body 标签而不是像这样调用：
document.getElementsByTagName('body').onload = function() {KeepFoot()};
or use my code from below:
或从下面使用我的代码：
(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";
}
})();
回答by Yazan W Yusuf
I thing your function works very well. maybe what is missing is the function calling.
我认为您的功能运行良好。也许缺少的是函数调用。
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();
see this jsfiddle
看到这个jsfiddle
回答by Eduardo Pérez
If what you want is to maintain the footer on the bottom of the page, you must read this. cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
如果你想要保持页面底部的页脚，你必须阅读这个。cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
You can do it without js.
你可以在没有js的情况下做到这一点。
