根据其他 div 高度动态地将 css 值内联到 div - 使用动态高度粘贴页脚答案

【问题标题】：Dynamically setting css values inline to divs based on other div height - stick footer with dynamic height根据其他 div 高度动态地将 css 值内联到 div - 使用动态高度粘贴页脚
【发布时间】：2014-07-23 23:42:06
【问题描述】：

我正在使用Ryan Fait's Stick Footer，但我正在尝试动态实现某些东西，获取 .footer 高度并将内联 css 设置为 .wrapper 和 .push，以便我可以使用具有动态高度的页脚。

我尝试了这段代码，但没有成功：

$(function(){
    var footerHeight = $(".footer").height();
    $(".wrapper").css("margin-bottom", -footerHeight);
    $(".push").css("height", footerHeight);
});

谁能给我解惑？

【问题讨论】：

实际上我做错了什么，没有正确加载 jQuery，现在它工作正常。下面的两个答案也都很好用！
对于那些想知道它是如何修复的人，这里有一个演示：jsfiddle.net/h7Ct7
这个解决方案实际上解决了使用自动高度的页眉和页脚的问题。

标签： javascript css sticky-footer

【解决方案1】：

我相信你需要给它px。

$(function(){
    var footerHeight = $(".footer").height();
    $(".wrapper").css("margin-bottom", "-"+footerHeight+"px");
    $(".push").css("height", footerHeight+"px");
});

【讨论】：

实际上我在代码中做错了，没有正确加载 jQuery。 TT Tnks，现在工作正常！

【解决方案2】：

试试这个：

    $(function(){
        var footerHeight = parseInt($(".footer").height());
        var actualHeight = parseInt($(".wrapper").css("margin-bottom"))-parseInt(footerHeight);
        $(".wrapper").css("margin-bottom", "-"+actualHeight+"px");
        $(".push").css("height", footerHeight+"px");
    });

有时当我想进行此类修复时，我会使用超时来确保页面将完全加载。

-----已编辑-----

我没有时间测试它，但您需要 parseInt 包装器 CSS。然后你会有一个整数。此外，您需要定义它是 PX 还是 %。我很确定 -footerHeight 你使用的方式不起作用。

干杯

【讨论】：

哇不错。很高兴知道可以这样使用 -footerHeight =)