首页 > 程序开发 > web前端 > HTML/CSS >

css:footer自适应页面内容

2017-02-15

当页面内容超过一个页面的高度时,接着会出现竖直滚动条,那么脚表footer应该怎么自动适应内容超过一个页面高度这种情况呢? 一般html的页面布局是这样的:

当页面内容超过一个页面的高度时,接着会出现竖直滚动条,那么脚表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;
        }
相关文章
最新文章
热点推荐