欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-04-19 13:59:36
方法一：footer高度固定+绝对定位 HTML代码： CSS代码： 实现的效果： 首先，设置body的高度至少充满整个屏幕，并且body作为footer绝对定位的参考节点； 其次，设置main（footer前一个兄弟元素）的padding-bottom值大于等于footer的height值，以保证 ......

方法一：footer高度固定+绝对定位

html代码：

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

css代码：

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

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

实现的效果：

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

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

优点：footer一直存在于底部。

缺点：中间区域main如果内容不够，不能撑满页面的中间区域。

 方法二：footer高度固定+margin负值

html代码：

<body>
    <div class="container">
        <header>头部</header>
        <main>中间内容</main>
    </div>
    <footer>底部信息</footer>
</body>

css代码：

*{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}
.container{
    min-height:100%;
}

header{
    background: #000;
    text-align: center;
    height:50px;
    line-height: 50px;
    color:#fff;
}
main{ 
    padding-bottom:100px;
    background:#ccc;
    text-align: center;
}
footer{
    color:#fff;
    height:100px;
    line-height:100px;
    margin-top:-100px;
    text-align:center;
    background-color: #000;
}

此方法把footer之前的元素放在一个容器里面，形成了container和footer并列的结构：
首先，设置.container的高度至少充满整个屏幕；
其次，设置main（.container最后一个子元素）的padding-bottom值大于等于footer的height值；
最后，设置footer的height值和margin-top负值。

展示效果跟第一种是一样的，缺点跟第一种也是一样的。

方法三：footer高度任意+js

html代码：

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

css代码：

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

header{
    background: #000;
    text-align: center;
    height:50px;
    line-height: 50px;
    color:#fff;
}
main{ /* main的padding-bottom值要等于或大于footer的height值 */
    background:#ccc;
    text-align: center;
}
footer{
    color:#fff;
    width:100%;
    height:100px;
    line-height:100px;
    text-align:center;
    background-color: #000;
}
/* 动态为footer添加类fixed-bottom */
.fixed-bottom {
    position: fixed;
    bottom: 0;
    width:100%;
}

js（jquery）代码：

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

常用的纯css实现footer sticker

css代码：

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

html代码：

<div id="sticker">
    <div id="stickercon"></div>
</div>
<div id="footer">footer</div>

 

上一篇： 撩课-Python-每天5道面试题-第5天

下一篇： 这款战神让我眼前一亮 神舟战神Z7-KP7GZ上手

推荐阅读