1

我正在构建一个 Wordpress 主题，但页脚位置有问题。索引页很好，我在 style.css 中定义了“footer”的 margin-top，witch 将 bckimage 保存为 900px，将“foot_sadrzaj”的 margin-top 保存为 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，我认为......”之类的东西根本没有帮助......

4

3 回答 3

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. 你写margin-top在.setAttribute函数中，而不是marginTop.
  4. 你不必添加toString()，JS知道如何处理这个
  5. 此行document.getElementById('footer').setAttribute("style","margin-top:" + z + "px");正在禁用您在此处编写的内联background-image属性，我假设您可以从这里自己处理
于 2013-02-24T12:39:45.633 回答
0

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

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

于 2013-02-24T12:14:00.447 回答
0

即使是艰难的代码也有效，我错过了一个角度：如果内容小于浏览器窗口怎么办。或者还没有内容？然后我的页脚挂在中间的某个地方，而不是底部。这是解决方案，感谢@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");
    }
}
于 2013-02-25T17:07:08.377 回答