方法一：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. Python档案袋（生成器、迭代器、队列 )

    生成器: 简单的生成器实现: #生成器,将for循环的变量传递到前面的式子进行处理 #生成的并不是一个列表,而是一个存在算数规则的对象 #不能通过下标直接取值,必须一个一个从头到尾取 va=(i*2 ...

  2. elasticsearch6.6.2在Centos6.9的安装

    JDK8 做个记录,以防以后忘记能够查看. 1.elastic是java编写的,先搭建运行环境,6.6.2版本必须要jdk8以上版本才可运行,先官网下载jdk,上传服务器 https://www.or ...

  3. 【Python3爬虫】用Python中的队列来写爬虫

    一.写在前面 当你看着你的博客的阅读量慢慢增加的时候,内心不禁有了些小激动,但是不得不吐槽一下--博客园并不会显示你的博客的总阅读量是多少.而这一篇博客就将教你怎么利用队列这种结构来编写爬虫,最终获取 ...

  4. ArrayList 和 LinkedList 源码分析

    List 表示的就是线性表,是具有相同特性的数据元素的有限序列.它主要有两种存储结构,顺序存储和链式存储,分别对应着 ArrayList 和 LinkedList 的实现,接下来以 jdk7 代码为例 ...

  5. 卷积神经网络之LeNet

    开局一张图,内容全靠编. 上图引用自 [卷积神经网络-进化史]从LeNet到AlexNet. 目前常用的卷积神经网络 深度学习现在是百花齐放,各种网络结构层出不穷,计划梳理下各个常用的卷积神经网络结构 ...

  6. Oracle 经典面试题

    第一题 create table test( id ) primary key, type ) , t_id ), value ) ); ,,,'张三'); ,,,'男'); ,,,'); ,,,'刘 ...

  7. Python库的安装

    window下python2.python3安装包的方法 一.在线安装 安装好python.设置好环境变量后,在python安装目录下Script文件夹内会存在pip.exe和easy_install ...

  8. 学习笔记—HTML基础标签

    HTML的概念 概念: HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 ( ...

  9. 第九周LINUX 学习笔记

    基于GTID的mysql主从简单复制 一.简单主从模式配置步骤1.配置主从节点的服务配置文件1.1.配置master节点:[mysqld]binlog-format=ROWlog-bin=master ...

  10. springboot项目上传文件出现临时文件目录为空

    最近写文件上传到服务器读取的代码,前端使用FormData上传,服务端用MultipartFile接收,自己测试了下MultipartFile对象有什么东西,结果一般属性都能出来,测试getInput ...