正好学习页面页脚部分 看了一些文章,自己总结了一下:
一、始终位于页面下方(不随滚动条的下移而发生变化)
height: 50px;
width: 100%;
bottom: 0px;
position: fixed;
文字居中
text-align: center;
效果:
二、始终位于文章的下方
1.绝对位置法
position: absolute;
bottom: 0px;
需要注意的是,如果文章少于页面则页脚也会跟随上移,解决的办法则是加一条
min-height:100%;
2.负margin法
margin-top: -40px;
height: 30px;
该方法的使用前提是:
1、整个body必须分为两大块,如上html代码结构,一块正文内容(顶部导航栏可以放到里面写),一块页脚。
2、如果必须增加与.footer的同级的元素,则这个元素必须不增加正常文档流脱的高度,可以使该元素脱离文档流。
方法一个人看来理解起来比较绕,而且让body脱离文档流也可能会出现意料外的问题。
这种方法不破坏文档流,所有元素都是顺序定位的,因此直接就符合了“当内容多于窗口高度时页脚显示在所有内容最下面”的要求,