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

footer固定在页面底部的若干种方法

时间:2015-10-21 12:22:52      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

1 <div class="header"><div class="main"></div></div>
2 <div class="container"><div class="main"></div></div>
3 <div class="footer"><div class="main"></div></div>

如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考。(欢迎大家积极补充。)

以上布局为给个人写页面常用。

注:.main{

width:1050px;

margin:0 auto;

height:auto;

}

1、这是刚刚使用过的css,可以达到效果,只是不论浏览器的大小如何footer均会在底,主体内容则以滚动条形式显示。

.footer{

position:fixed;

bottom:0;

left:0;

}

2.待整理。。。。。

footer固定在页面底部的若干种方法

标签:

原文地址:http://www.cnblogs.com/nana-share/p/4897097.html

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