让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%20Sticky%20Footer.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Servlet共享数据

    共享数据: 1.域对象:有一个作用范围的对象,可以在范围内共享数据 2.request域:代表一次请求范围,一般用于请求转发的多个资源中共享数据 方法: 1.存储数据:setAttrbute(Stri ...

  2. Could not create cudnn handle: CUDNN_STATUS_INTERNAL_ERROR tensorflow-1.13.1和1.14windows版本目前不支持CUDA10.0

    报错出现 Could not create cudnn handle: CUDNN_STATUS_INTERNAL_ERROR tensorflow-1.13.1和1.14windows版本目前不支持 ...

  3. css---8 过渡属性刨析

    1.       transition-property 默认值为 all,表示所有可被动画的属性都表现出过渡动 可以指定多个 property 属性值: none 没有过渡动画. all 所有可被动 ...

  4. 2019亚太内容分发大会，阿里云获CDN领袖奖、技术突破奖

    近日,亚太CDN产业联盟主办的2019亚太内容分发大会在上海召开.本次大会以"5G分发"为主题,集结了CDN领域近千名行业领袖.专家参与.在会上,阿里云斩获“CDN领袖奖”.“技术 ...

  5. java8 list、map遍历以及反射

    //新建list List<User> userList = new ArrayList<>(); User user = new User(); user.setId(&qu ...

  6. tomcat下文件路径

    第一种:复制要访问的文件a.txt至tomcat安装路径下的webapps/ROOT文件夹下: 访问路径为:localhost:8080/a.txt 或者在webapps文件夹下新建一个文件夹(tes ...

  7. iframe,我们来谈一谈

      某大咖说: "iframe是能耗最高的一个元素,请尽量减少使用"某大牛说: "iframe安全性太差,请尽量减少使用"...wtf, 你们知不知道你们这样浇 ...

  8. Sublime Text 3，有了Anaconda就会如虎添翼

    作为Python开发环境的Sublime Text 3,有了Anaconda就会如虎添翼.Anaconda是目前最流行也是最有威力的Python代码提示插件. 操作步骤 1.打开package con ...

  9. Seam科普

    声明:这是引用的,具体引用位置在最下面. 只供个人学习,免得忘记了又要到处找,十分感谢原作作者.如果有什么问题请联系我. Seam框架开发一个HelloWrld的例子. Seam本身,而在于Seam使 ...

  10. 愚人节老板发话了，免费送书 + 免费入驻Java知识星球！！

    愚人节快乐,今天的活动很重磅! 1.免费送5本重量级技术书籍,不骗人,小程序随机抽奖送出哦! 2.免费进星球,哈哈不可能,愚人节快乐!不过今天有重大优惠,见下文! 活动一:免费送出5本重量级书籍 赠书 ...