Search code examples
javascriptjqueryhtmlcsssticky-footer

Make footer, with variable height, at the bottom

Well, I'm using Materializecss framework and I have a issue with the footer. Materialize's footer have a variable height. In small devices, it gets bigger. So I can't use the classics method that use a padding-bottom equal to footer height.

My 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;
}

My HTML:

<html>
    <body>

        <div id="wrapper">

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

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

        </div>

    </body>
</html>

I tried to add this script, but doesn't work:

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');
});

Help!

Solution

  • If a jQuery solution is fine for you, then you can count the footer height and add it as padding-bottom to #conteudo, either once on DOM ready or on resize: 

    $(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);
});