在底部制作高度可变的页脚

Question

好吧，我使用的是 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');
});

求助！

Answer 1

如果 jQuery 解决方案适合您，那么您可以计算页脚高度并将其作为填充底部添加到 #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);
});

在底部制作高度可变的页脚

Make footer, with variable height, at the bottom

html

javascript

css

jquery

sticky-footer