Question

我正在构建一个Wordpress主题，我的页脚位置有问题。索引页面很好，我在style.css margin-top of“footer”中定义，女巫持有bipimage到900px，margin-top为“foot_sadrzaj”到918px，因为“foot_sadrzaj”包含文本和图像。这是链接：http://casabianca.ba/test/

好吧，如果我转到页面，页面的内容就在，或者在显示帖子时，在。我写了一些JS代码来改变页脚和foot_sadrzaj的位置，取决于sadrzaj或sadrzaj_single的位置和高度，包含内容的元素，但它不起作用（如：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");
        }
    }

您应该使用window.onload，仅在文档准备好后运行脚本
您不需要style中的div.style.offsetTop+div.style.offsetHeight。
您在margin-top函数中写了.setAttribute，而不是marginTop。
你不必添加toString()，JS知道如何处理这个
此行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");
    }
}

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

3 个答案: