当页面内容超过一个页面的高度时，接着会出现竖直滚动条，那么脚表footer应该怎么自动适应内容超过一个页面高度这种情况呢？
一般html的页面布局是这样的：
<html>
<body id="mybody">
<p class="mainContent"></p>
<footer id="myfooter"></footer>
</body>
</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的p元素，因此，设置一个position属性：
#mybody {
position: absolute;
}
这样设置可以吗？ 不行。因为，footer相对于mybody这个元素还是绝对定位，footer不会滚动。所以，需要添加：
#mybody {
position: relative;
}
mybody这个p元素是相对的，当滚动条移动时，p元素随之发生变化，因为footer又是绝对的，这样footer会跟着p变化而变化，bottom:0px，这样它就始终处于内容的最底部。效果如下，可以看到滚动条位于最底部时，footer才被看到。
总结，要想footer随着页面内容自适应，始终位于内容底部，需要做如下设置：
#mybody {
position: relative;
}
#myfooter{
position: absolute;
bottom: 0px;
}
