Question

好吧，我正在使用Materialisecss框架，我的页脚有问题。 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);
});

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

1 个答案: