码迷,mamicode.com
首页 > 其他好文 > 详细

footer 置于页面底部的不解

时间:2014-12-06 22:46:06      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:blog   io   os   sp   on   div   问题   log   bs   

网上关于如何将 footer 置于页面底部的文章太多了,我也照着做了几个,但效果不理想,总是有各种各样的问题。

 

一般的原理都是将 footer 的相对于包含元素绝对定位,而包含元素的高度为百分比。

原理很清晰,但我总是看不懂那些案例的代码。

我试着按照这个原理,自己写了一个,发现在 Chrome 39 和 IE11 下都能正常运作。

HTML:

<body>
...
<div class="wrapper"> </div> <footer>...</footer>
</body>

CSS:

body{
    height: 100%;
}

html {
    height: auto;
    min-height: 100%;
    position: relative;
}

footer{
    position: absolute;
    bottom: 0px;
    height: 20px;
}

  原理也很清晰明了,但我不确定在其他版本的浏览器下能正常运行。

footer 置于页面底部的不解

标签:blog   io   os   sp   on   div   问题   log   bs   

原文地址:http://www.cnblogs.com/ferrum/p/4148886.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!