JavaScript动态更改div（页脚）的位置-我的代码有什么问题？

Question

我正在建立Wordpress主题，但页脚位置有问题。 索引页很好，我在style.css中定义了“页脚”的页边空白，女巫将bckimage保留为900px，将“ foot_sadrzaj”的页边保留为918px，因为“ foot_sadrzaj”保留了文本和图像。 这里的链接： http : //casabianca.ba/test/

好吧，如果我转到页面，则页面内容位于中，或者在显示帖子时，位于中。 我编写了一些JS代码，以根据sadrzaj或sadrzaj_single的位置和高度（包含内容的元素）来更改页脚和foot_sadrzaj的位置，但是它不起作用（例如： http ://casabianca.ba/test/novosti/） ....您能帮我找出原因吗？

这是代码：

var div = getElementById('sadrzaj');
var div2 = getElementById('sadrzaj_single');


if (div) {
    var z = div.style.offsetTop+div.style.offsetHeight;
    getElementById('footer').setAttribute(
            "style", "marginTop:" + z.toString() + "px");
    getElementById('foot_sadrzaj').setAttribute(
            "style", "marginTop:" + (z+18).toString() + "px");
}
else if (div2) {
    var z = div2.style.offsetTop+div2.style.offsetHeight;
    getElementById('footer').setAttribute(
            "style", "marginTop:" + z.toString() + "px");
    getElementById('foot_sadrzaj').setAttribute(
            "style", "marginTop:" + (z+18).toString() + "px");
}

拜托，我只知道一些JS和零JQuery，所以回答诸如“尝试Jquery，我认为...”之类的内容根本没有帮助。

Answer 1

代码中的一些修复

window.onload = function ()
    {
        var div=document.getElementById('sadrzaj');
        var div2=document.getElementById('sadrzaj_single');

        if(div) {
            var z=div.offsetTop+div.offsetHeight;
            var footer = document.getElementById('footer');
            footer.setAttribute("style","margin-top:" + z.toString() + "px");

            var foot_sadrzaj = document.getElementById('foot_sadrzaj');
            foot_sadrzaj.setAttribute("style","margin-top:" + (z+18) + "px");
        }
        else if (div2) {
            var z=div2offsetTop+div2.offsetHeight;
            document.getElementById('footer').setAttribute("style","margin-top:" + z + "px");
            document.getElementById('foot_sadrzaj').setAttribute("style","margin-top:" + (z+18) + "px");
        }
    }

1. 您应该使用window.onload ，仅在文档准备好后运行脚本
2. 你不需要style在div.style.offsetTop+div.style.offsetHeight 。
3. 您在.setAttribute函数中编写margin-top ，而不是marginTop 。
4. 您不必添加toString() ，JS知道如何处理
5. 这行document.getElementById('footer').setAttribute("style","margin-top:" + z + "px"); 正在禁用您在此处编写的内联background-image属性，我认为您可以从此处自行处理

Answer 2

而不是使用margin-top使用"bottom : 0"将内容与容器div的底部对齐。 然后停止使用Javascript来定义位置，而仅使用CSS。

设置"z-index:100000"和"position:fixed"甚至可能很有趣

Answer 3

即使是艰难的代码也能奏效，我还是错失了一个角度：如果内容小于浏览器窗口该怎么办。 还是还没有内容？ 然后我的页脚悬在中间的某个地方，而不是底部。 这是解决方案，这要感谢@Mitz和James Padolsey

最终解决方案：

function getDocHeight() {
var D = document;
return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

window.onload = function (){
    var div=document.getElementById('sadrzaj');
    if(div) {
        var z=div.offsetTop+div.offsetHeight;
    var z2=div.offsetTop+div.offsetHeight+18;
    var windowHeight= getDocHeight();
if(z>windowHeight) {
        var footer = document.getElementById('footer');
        footer.setAttribute("style","margin-top:" + z + "px");

        var foot_sadrzaj = document.getElementById('foot_sadrzaj');
        foot_sadrzaj.setAttribute("style","margin-top:" + z2 + "px");
}
else {
    var footer = document.getElementById('footer');
        footer.setAttribute("style","margin-top:" + windowHeight + "px");

        var foot_sadrzaj = document.getElementById('foot_sadrzaj');
        foot_sadrzaj.setAttribute("style","margin-top:" + (windowHeight+18) + "px");
    }
}