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

longshengwang 发布于2019-04-23 13:08 / 2889人阅读

摘要：方法二高度固定负值代码头部中间内容底部信息代码此方法把之前的元素放在一个容器里面，形成了和并列的结构首先，设置的高度至少充满整个屏幕其次，设置最后一个子元素的值大于等于的值最后，设置的值和负值。

方法一：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;
}

实现的效果：

首先，设置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">footerdiv>

云服务器 GPU云服务器 footer页面底部固定页面底部 html实现页面底部页面底部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1475.html

八种方法实现CSS页面底部固定

摘要：当我们在写页面时经常会遇到页面内容少的时候，会戳在页面中间或什么反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部，方法一高度固定绝对定位查看效果方法二在主体上的下边距增加一个负值等于底部高度 showImg(https://segmentfault.com/img/bVbmX36?w=1140&h=641);当我们在写页面时经常会遇到页面内容少的时...

lentrue 2019-08-30 15:55 评论0 收藏0
八种方法实现CSS页面底部固定

摘要：当我们在写页面时经常会遇到页面内容少的时候，会戳在页面中间或什么反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部，方法一高度固定绝对定位查看效果方法二在主体上的下边距增加一个负值等于底部高度 showImg(https://segmentfault.com/img/bVbmX36?w=1140&h=641);当我们在写页面时经常会遇到页面内容少的时...

KitorinZero 2019-08-02 14:04 评论0 收藏0
紧贴底部的页脚

摘要：这样就可以了我们只需要四行简单的代码，就完美实现了紧贴底部的页脚。后记上面是我总结的四种方法，如果还有什么更好的方法，欢迎共同探讨参考资料总在底部的页脚揭秘前言在写前端页面时，经常会遇到这种情况：有一个具有块级样式的页脚，当页面内容足够长时它一切正常；有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来；页脚不能像我们期望中那样紧贴在视口的最底部，而是紧跟在内容的下方。那么...

greatwhole 2019-08-29 12:45 评论0 收藏0
将footer固定在页面底部的实现方法

摘要：也可以设置负值的在上面，此时结构变化如下设置使用一个空的把容器推到页面最底部，同时给设置一个负值的，这个与和的高度相等。方法一：footer高度固定+绝对定位 HTML结构： header main content footer CSS设置： html{height:100%;} body{min-height:100%;margin:0;padding:...

leeon 2019-08-30 12:47 评论0 收藏0