纯css让页脚固定在最下方

在制作网页时,我们通常喜欢在网页最下方放置一个页脚区域,在里面可以注明版权信息、备案信息、联系方式,也可以加一些链接、放置访问量统计等内容。

但是放置页脚时有一个非常棘手的问题:如果页脚直接跟在网页内容的下面,当网页内容不够一屏的时候,页脚不能保证在屏幕的底部,而是悬在屏幕中央,看起来很不美观。如果把页脚设置为固定在屏幕底部,如果网页内容超过一页,在我们浏览内容时页脚就会占用屏幕下方面积,甚至遮挡正文,在屏幕比较小的移动设备上面浏览时尤其明显。

我在这里介绍一种两全其美的方案,使得固定高度的页脚在内容较少时能够显示在屏幕的最下方,在内容较多时能够跟在网页下面。

这种方法是我在看Bootstrap的示例的时候发现的。示例的链接:http://v2.bootcss.com/examples/sticky-footer.html

虽然这是Bootstrap的示例,但是按照其中的思路,不用Bootstrap也可以做出这样的页脚。

首先我们要设置body和html的height为100%,两者缺一不可。这样即使网页内容较少时,整个网页也会充满浏览器窗口。

现在如果直接把正文和页脚排上去,它们仍然会从上到下依次排列,页脚并不能在最下方。这就需要我们用一个不可见的区域来把页脚“挤”下去。那么这个区域的大小怎么设置呢?如果在正文和页脚之间开辟一块区域,那么还要根据内容是否充满一屏来分情况计算,很不方便。所以这个区域应该直接把正文包含在内。

如果这样,这个区域的高度就应该是屏幕高度减去页脚高度。虽然css3中可以用calc进行数学计算,但是这里采用一种更简单的方法:把这块区域的最小高度设置为100%,同时margin-bottom设置为负的页脚高度,就可以保证内容不到一页时页脚在屏幕最下方而不超出屏幕了。

又有一个问题随之而来:当内容超过一屏时,内容会充满刚才说的那块区域。负的margin-bottom会导致页脚和正文内容的最下方重叠,使得用户永远看不到正文的最后几行。所以这里用一个高度为页脚高度的div填充那块区域的最下面一部分。

关键的css代码如下:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
  margin: 0 auto -60px;
}

#push, #footer {
  height: 60px;
}

html的body部分主要结构如下:

<body>
    <div id="wrap">
      <div>
        <p>Hello, world!</p>
      </div>
      <div id="push"></div>
    </div>
    <div id="footer">
      <p>This is footer.</p>
    </div>
</body>

大概的网页结构示意图:
footer

《纯css让页脚固定在最下方》有5个想法

    1. 这样当网页内容超过一屏时页脚仍然会固定在下方。在小屏幕设备查看时一直占用空间,并不是很美观。

  1. 你好!ZZH同学!
    我是化院13级的王子涵,对咱学校的freeshell还挺感兴趣的。偶然间访问到了你的网站,我也希望用freeshell托管WP,想问下你是怎么做到的?能不能发邮件告诉我?
    期待着你的回复,祝好!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注