footer固定在页面底部的实现方法总结

前端开发作者： 2024-08-20 16:30:01

方法一：footer高度固定+绝对定位 HTML代码： CSS代码：实现的效果：首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点；其次，设置main（fo

<body>
    header>头部</main>中间内容footer>底部信息>
>

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    min-height:100%;
    position:relative;
}

header{
    background: #000;
    text-align: center;50px;
    line-height: 50px;
    color:#fff;
}
main{ /* main的padding-bottom值要等于或大于footer的height值 */
    padding-bottom:100px;#ccc; center;
}
footer{absolute;#fff;
    bottom:
    width:center;
    background-color: #000;
}

首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点；
其次，设置main（footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；
最后，设置footer绝对定位，并设置height为固定高度值。

div class="container">
        div
html,body{
.container{
main{ 
    padding-bottom:
    margin-top:-100px; #000;
}

 #000;
}
 动态为footer添加类fixed-bottom */
.fixed-bottom { fixed; 0;100%;
}

$(function(){
     footerPosition(){
        $("footer").removeClass("fixed-bottom");
        var contentHeight = document.body.scrollHeight,//网页正文全文高度
            winHeight = window.innerHeight;可视窗口高度，不包括浏览器顶部工具栏
        if(!(contentHeight > winHeight)){
            当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
            $("footer").addClass("fixed-bottom");
        }
    }
    footerPosition();
    $(window).resize(footerPosition);
});

html,body,#sticker {height: 100%;}
    body > #sticker { auto; min-height:
    #stickerCon {padding-bottom: 40px;} 
    #footer {margin-top:-40px; height: 40px; width: 100%; text-align: line-height: color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}

id="sticker"="stickerCon"></="footer">footer>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65610.html

相关资讯： footer固定在页面底部的实现方法总结

footer固定在页面底部的实现方法总结

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签