方法一：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. Oracle执行计划学习笔记

    目录 一.获取执行计划的方法 (1) explain plan for (2) set autotrace on (3) statistics_level=all (4) dbms_xplan.dis ...

  2. 深度辨析 Python 的 eval() 与 exec()

    Python 提供了很多内置的工具函数(Built-in Functions),在最新的 Python 3 官方文档中,它列出了 69 个. 大部分函数是我们经常使用的,例如 print().open ...

  3. Win10+RTX2080深度学习环境搭建：tensorflow、mxnet、pytorch、caffe

    目录 准备工作 设置conda国内镜像源 conda 深度学习环境 tensorflow.mxnet.pytorch安装 tensorflow mxnet pytorch Caffe安装 配置文件修改 ...

  4. [Linux] host dig nslookup查询域名的DNS解析

    root@VM-38-204-ubuntu:~# host baidu.com baidu.com has address 220.181.57.216 baidu.com has address 1 ...

  5. Mybaits-plus实战（一）

    1. Mybaits-plus实战(一) 1.1. 快速开始 1.1.1. 配置文件 # 扫描位置 mybatis-plus.mapper-locations=classpath:/mapper/*M ...

  6. ArcGIS JS API多线程克里金插值

        最近做关于雨量插值的项目,本来使用后台的GP工具做的,但是处理时间比较长需要十几秒钟左右,所以研究怎么通过前台来计算.     参考下克里金例子,思路是生成要计算区域的100乘以100网格,然 ...

  7. gitbash安装与使用

    1. 下载安装git (windows版) 网址:https://git-scm.com/download/win 点击for windows版本->下载 2. 点击exe文件安装,安装完成后打 ...

  8. 使用Chrome 中的 ssh 插件登陆 linux 服务器

    . 在chrome 商店中搜索 secure shell , 安装 Secure Shell Extension 2. 安装完成后,就可以在应用程式中找到Secure Shell App 3.点击 S ...

  9. 在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件

    [文件(File)]-[设置(Settings)]-[工具(Tools)]-[File Watchers]-[+]-[Less]打开New Watcher配置界面. https://blog.csdn ...

  10. octotree-chrome插件，Github代码阅读神器

    1.下载octotree-chrome插件 下载地址 2.安装问题 由于新版chrome为了安全,已经不支持像以前一样拖拽插件进行安装,只能从其 Chrome Web Store 下载安装扩展程序. ...