方法一：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. JPushDemo【极光推送集成，基于v3.1.8版本】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这个Demo只是记录极光推送的集成,不能运行. 使用步骤 一.项目组织结构图 注意事项: 1.  导入类文件后需要change包名以 ...

  2. 百度病了，必应挂了，Yandex疯了。

    前天一篇<搜索引擎百度已死>的文章火遍了互联网圈.文中作者指出如今的百度搜索首页一大半都是百度自家的产品,比如你搜索特普朗,你会发现第一页的结果分别是:百度百科.贴吧.百家号.百家号.百家 ...

  3. 微信小程序之滑动日历展示

    滑动日历效果 效果预览 实现要求:顶部固定悬浮的是获取未来一周的日期,分为上下两部分,上面部分显示星期,下面则显示具体日期.今天则显示今天,可点击头部具体日期,可向左向右滑动. 实现代码 顶部日历 页 ...

  4. python3第一天，随便写写

    哈哈 我滴第一篇博客,不知道咋写,随意看了看别人的博客,我还是不知道咋写,既然是我的博客,那我就把它当随笔写了(这里就是添加随笔...) 也不知道自己说了啥,不过想到了一句话:日记都是写给别人看的.哈 ...

  5. 函数声明 和 var声明的优先级

    function demo() { console.log(5) } var demo = function(){ console.log(4) } console.log(demo()) var d ...

  6. vi/vim 添加或删除多行注释

    进入vi/vim编辑器,按CTRL+V进入可视化模式(VISUAL BLOCK)    移动光标上移或者下移,选中多行的开头,如下图所示   选择完毕后,按大写的的I键,此时下方会提示进入“inser ...

  7. 微信小程序picker组件关于objectArray数据类型绑定

    一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...

  8. appium-desktop定位元素原理

    初衷 最近在编写Android App自动化用例,其中元素定位相对来说耗费的时间比较长.我们都知道Appium-desktop拥有自己的录制功能,我们就在想是不是可以把录制功能跟我司的自动化框架(AT ...

  9. 用pyinstaller打包python程序，解决打包时的错误：Cannot find existing PyQt5 plugin directories

    解决方法就是用everything搜索PyQt5,找到 /Library/plugins路径下的PyQt5文件夹,将里面的dll动态库pyqt5qmlplugin.dll复制出来 按照错误提示的路径, ...

  10. Java的二分搜索树

    定义 二分搜索树是二叉树(不包含重复元素). 二分搜索树的每个节点的值,大于左子树的所有节点的值,小于其右子树的所有节点的值. 每一棵子树也是二分搜索树. 二叉树搜索树必须要有比较,继承Compara ...