css:footer自适应页面内容

17-02-15 来源：[db:作者]

收藏我要投稿

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

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

<html>
  <body id="mybody">
    <div class="mainContent"></div>
    <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的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;
        }

点击复制链接与好友分享!回本站首页