gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 11:06:52 25 4
gpt4 key购买 nike

好吧,我正在使用 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');
});

帮助!

最佳答案

如果 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);
});

关于javascript - 在底部制作高度可变的页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33915533/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com