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

这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧。由HTML和CSS实现，没有令人讨厌的hacks。所以这就能在所有主流浏览器上正常运行（甚至包括IE5和IE6）。

如何通过用CSS让Footer固定在页面顶部。

在样式表单里添加下面几行CSS代码。.wrapper 的负外边距与 .footer 和 .push 的高度相等。负外边距应该与footer的整体高度相等（包括padding、border）。

* {

    margin: 0;

}

html, body {

    height: 100%;

}

.wrapper {

    min-height: 100%;

    height: auto !important; /* 如果你不需要考虑IE6，则可以把这行与下一行代码删除 */

    height: 100%;

    margin: 0 auto -4em;

}

.footer, .push {

    height: 4em;

}

按照此 HTML 结构。没有内容会超出 .wrapper 和 .footer 的 div 标签，除非超出内容是通过CSS的绝对定位。另外，.push 的 div 标签也不应该含有内容，毕竟它是作为一个将footer“推”下去的隐藏元素。否则会与footer的内容重叠。

<html>

    <head>

        <link rel="stylesheet" href="layout.css" />

    </head>

    <body>

        <div class="wrapper">

            <p>Your website content here.</p>

            <div class="push"></div>

        </div>

        <div class="footer">

            <p>Copyright (c) 2008</p>

        </div>

    </body>

</html>

多列布局（通过浮动）

为 .push div 添加 clear 属性。

.footer, .push {

    clear: both;

}

height:auto!important; 和 height:100%;属性

这两个属性是为了在IE6及以下的浏览器实现 min-height 效果(min-height只兼容IE7及以上)。所以，当你不需要考虑IE6时，可把这两个属性删除。

因为IE6是考虑元素内容的尺寸，而不是元素本身尺寸。在符合标准的浏览器中，如果元素的内容太大，它只会超出框之外。但是在IE6中，如果元素内容太大，则整个元素就会扩展(包括宽和高)。即设定的width表现得像min-width。

完整代码：https://github.com/JChehe/CSS-Sticky-Footer/blob/master/CSS Sticky Footer.html

参考：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

让footer固定在页面（视口）底部（CSS-Sticky-Footer）的更多相关文章

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

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

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

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

  3. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

  4. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

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

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

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

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

  7. CSS Sticky Footer: 完美的CSS绝对底部

    CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...

  8. 将footer固定在页面最下方

    方法一: HTML结构: <div id="id_wrapper"> <div id="id_header"> Header Block ...

  9. 【转载】CSS Sticky Footer: 完美的CSS绝对底部

    下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap&qu ...

随机推荐

  1. 咏南中间件支持DELPHI低版本开发的两层程序平稳升级到三层

    提供DELPHI中间件及中间件集群,有意请联系. N年前,我们用DELPHI低版本开发的两层程序(比如工厂ERP系统),现在仍然在企业广泛地得到使用,但老系统有些跟不上企业的发展需要了.主要表现在:虽 ...

  2. BZOJ 2243: [SDOI2011]染色 (树链剖分+线段树合并)

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2243 树链剖分的点剖分+线段树.漏了一个小地方,调了一下午...... 还是要细心啊! 结 ...

  3. Contest 7.23（不知道算什么）

    Problem A   URAL 1181 Cutting a Painted Polygon 题目大意就是说有一个N边形,让你做N-3条边,让他们的每个三角形的三个顶点颜色都不相同. 这里有一个引理 ...

  4. 关于session更新的问题

    最近在学习用ssh框架做一个实习生招聘系统,已经做了大半.今天突然想到一个问题,在登录的时候我把用户的所有信息放到session中去,那么我不同用户同时登录的时候session中的信息是否会被覆盖掉( ...

  5. <math.h>与<float.h>

    (一) <math.h> <math.h>文件中已经定义了M_PI,如下所示,用户可以直接使用: //math.h........................ #if de ...

  6. Connection对象连接加密2

    一般情况下,大多数人习惯于将数据库连接写在web.config上里面,理论上讲,将明文存放在该文件里面是安全的,因为web.config文件是不允许被客户端下载,但一旦该文件泄漏出去,哪怕是很短的时间 ...

  7. .net版本之间的关系

    net framework 2.0,3.0与3.5三个版本之间关系如下: .net framework 2.0 = CLR 2.0 + FCL(framework class library) .ne ...

  8. 音频视频播放（jquery中将jquery方法转化成js方法）

    在jQuery中没有音频视频直接播放的方法,我们在写音频视频时,应该将jquery的方法转化为js方法:play():pause() 补充:   将jq对象转化成js对象写法: var music=$ ...

  9. Windows命令大全

    From:http://technet.microsoft.com/zh-cn/library/cc731728(v=ws.10).aspx Adprep Append Arp Assoc At At ...

  10. iOS开发——语法篇OC篇&高级语法精讲二

    Objective高级语法精讲二 Objective-C是基于C语言加入了面向对象特性和消息转发机制的动态语言,这意味着它不仅需要一个编译器,还需要Runtime系统来动态创建类和对象,进行消息发送和 ...