在底部制作具有可变高度的页脚答案

【问题标题】：Make footer, with variable height, at the bottom在底部制作具有可变高度的页脚
【发布时间】：2016-02-28 04:27:06
【问题描述】：

好吧，我正在使用 Materializecss 框架，但页脚有问题。 Materialise 的页脚具有可变高度。在小型设备中，它会变得更大。所以我不能使用 padding-bottom 等于页脚高度的经典方法。

我的 CSS：

html, body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper {
min-height: 100%;
position: relative
}

#conteudo {
    padding-bottom:425px; /* Fail height equal to footer height */
}

#rodape {
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
}

我的 HTML：

<html>
    <body>

        <div id="wrapper">

            <div id="conteudo">
                <div class="container">
                </div>
            </div>

            <div id="rodape">
            </div>

        </div>

    </body>
</html>

我尝试添加此脚本，但不起作用：

JS：

$(document).ready(function fix_layout(){
    if($(#rodape).height()<350){
        $("#conteudo").css("padding-bottom", "276px");
    }
    if($(#rodape).height()>350 && $(#rodape).height()<500){
        $("#conteudo").css("padding-bottom", "354px");
    }
    if($(#rodape).height()>500){
        $("#conteudo").css("padding-bottom", "506px");
    }
    $(window).trigger('fix_layout');
});

救命！

【问题讨论】：

标签： javascript jquery html css sticky-footer

【解决方案1】：

如果 jQuery 解决方案适合您，那么您可以计算页脚高度并将其作为 padding-bottom 添加到#conteudo，在 DOM 准备好或调整大小时添加：

$(document).ready(function(){
    var $conteudo = $('#conteudo'),
        $rodape = $('#rodape'),
        addPaddingBottom;

    addPaddingBottom = function addPaddingBottom(){
        var extraPadding = 6, 
            rodapeHeight = $rodape.height();

        $conteudo.css({
            'padding-bottom' : (rodapeHeight + extraPadding) + 'px'
        });

    }

    //make it once on DOM ready
    addPaddingBottom();

    //and recalculate padding when window is resized
    $(window).resize(addPaddingBottom);
});

【讨论】：

工作就像一个魅力 =) 谢谢！