让footer始终位于页面的最底部不随滚动而滚动
发布时间：2014-07-28 16:26:14 作者：佚名 
我要评论
我要评论本节主要介绍了如何让footer始终位于页面的最底部不随滚动而滚动，此效果在网页中非常实用，建议大家好好学习哦
html代码：
<div class="container">
<div cass="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
第一种情况：footer随着滚动条的滚动而滚动
.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:absolute;bottom:0px;left:0px;}
第二种情况:footer始终在其底部固定
.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:fixed;bottom:0px;left:0px;}
注意：
1.千万不能设置.container的高度为100%,否则将无法随滚动条的滚动而滚动.
复制代码
代码如下:<div class="container">
<div cass="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
第一种情况：footer随着滚动条的滚动而滚动
复制代码
代码如下:.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:absolute;bottom:0px;left:0px;}
第二种情况:footer始终在其底部固定
复制代码
代码如下:.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:fixed;bottom:0px;left:0px;}
注意：
1.千万不能设置.container的高度为100%,否则将无法随滚动条的滚动而滚动.
相关文章
- 下面小编就为大家带来一篇html的footer置于页面最底部的简单实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-13
移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法
这篇文章主要介绍了移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法,本文讲解如何解决移动端悬浮层会遮挡住内容的3种方法,需要的朋友可以参考下2015-03-27- CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。2014-09-02
- Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见,本文将介绍两2012-12-02
- 这个网页即使内容很少的情况下，它也始终在页面的底部。否则页面底部将留下大量空白。2009-10-20
- 下面小编就为大家带来一篇利用CSS使footer固定在页面底部的实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-13
最新评论