html底部自动适应,css: footer自适应页面底部

当页面内容超过一个页面的高度时，接着会出现竖直滚动条，那么脚表footer应该怎么自动适应内容超过一个页面高度这种情况呢？

一般html的页面布局是这样的：

那么，如何实现内容超过1页，footer的自动适应，始终位于整个内容的底部呢？有一种常见的实现方法是这样的，新建一个css文件，定义footer选择器，如下：

#myfooter{ background-color:#8FBC8F; height:50px; text-align:center; position:absolute; bottom:0px; }

打开这个html，测试发现未达到要求。footer始终在显示器的底部，甚至滚动条拉到最后时，footer跑到上面都看不到了。因为footer并未随着滚动条而移动，效果是这样：

为什么footer不会随着滚动条而移动呢？这里请看，#myfooter选择器的定义:

position: absolute;

bottom: 0px;

查阅资料发现，层模型中绝对定位的定义如下：

元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

因此不难看出，为什么footer相对于浏览器窗口位置一直保持不变的原因了。这个距离始终等于屏幕高度。

那么如何设置，才能使footer随着滚动条移动呢？ 再注意上文引用中的一句话：

使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

很明显，footer的父元素是id为mybody的div元素，因此，设置一个position属性：

#mybody { position:absolute; }

这样设置可以吗？ 不行。因为，footer相对于mybody这个元素还是绝对定位，footer不会滚动。所以，需要添加：

#mybody { position:relative; }

mybody这个div元素是相对的，当滚动条移动时，div元素随之发生变化，因为footer又是绝对的，这样footer会跟着div变化而变化，bottom:0px，这样它就始终处于内容的最底部。效果如下，可以看到滚动条位于最底部时，footer才被看到。

总结，要想footer随着页面内容自适应，始终位于内容底部，需要做如下设置：

#mybody { position:relative; }

#myfooter{ position:absolute; bottom:0px; }