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

HTML代码：

<body>

    <header>头部</header>

    <main>中间内容</main>

    <footer>底部信息</footer>

</body>

CSS代码：

*{

    margin:;

    padding:;

}

html{

    height:100%;

}

body{

    min-height:100%;

    margin:;

    padding:;

    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:;

    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:;

    padding:;

}

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:;

    padding:;

}

html{

    height:100%;

}

body{

    min-height:100%;

    margin:;

    padding:;

    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:;

    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>

footer固定在页面底部的实现方法总结的更多相关文章

  1. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  2. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  3. 在不适用fixed的前提下，当内容较少时footer固定在页面底部

    使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...

  4. Footer固定在页面底部(CSS)

    <style type="text/css"> #wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/ h ...

  5. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  6. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  7. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  8. 让footer固定在页面（视口）底部（CSS-Sticky-Footer）

    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  9. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

随机推荐

  1. 从壹开始微服务 [ DDD ] 之终篇 ║当事件溯源 遇上 粉丝活动

    回首 哈喽~大家好,时间过的真快,关于DDD领域驱动设计的讲解基本就差不多了,本来想着周四再开一篇,感觉没有太多的内容了,剩下的一个就是验证的问题,就和之前的JWT很类似,就不打开一个章节了,而且这个 ...

  2. 【ODI】| 数据ETL：从零开始使用Oracle ODI完成数据集成（二）

    前一节已经完成了Oracle数据库和ODI的安装,并已经为ODI在Oracle数据库中创建了两个用户,分别用于存放主资料库数据和工作资料库数据,在ODI中完成主资料库和工作资料库的创建,也分别为其创建 ...

  3. Caffe源码理解1：Blob存储结构与设计

    博客:blog.shinelee.me | 博客园 | CSDN Blob作用 据Caffe官方描述: A Blob is a wrapper over the actual data being p ...

  4. Docker镜像细节

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾前面: 为什么需要Docker? Docker入 ...

  5. 第9章 设备授权端点(Device Authorization Endpoint) - IdentityModel 中文文档(v1.0.0)

    OAuth 2.0设备流设备授权的客户端库是作为HttpClient扩展方法提供的. 以下代码发送设备授权请求: var client = new HttpClient(); var response ...

  6. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

  7. 工程实践：给函数取一个"好"的名字

    工程实践:给函数取一个"好"的名字 早在2013年,国外有个程序员做了一个有意思的投票统计(原始链接请见:<程序员:你认为最难做的事情是什么?>),该投票是让程序员从以 ...

  8. sqlserver2012 在视图中建索引

      第一种 如果已经有视图但是要加索引只需要执行 以下SQL就好(前提是此视图必须                    绑定到架构) CREATE UNIQUE CLUSTERED INDEX in ...

  9. 【原】无脑操作：ElasticSearch学习笔记（01）

    开篇来自于经典的“保安的哲学三问”(你是谁,在哪儿,要干嘛) 问题一.ElasticSearch是什么?有什么用处? 答:截至2018年12月28日,从ElasticSearch官网(https:// ...

  10. C语言中#undef作用

    #undef 作用:取消定义的宏 指令格式:#undef 标识符 1 #include <stdio.h> 2 3 #define MAX 5 4 5 int main() { 6 pri ...