Bootstrap 中使 Footer 置底简明教程

作者:czp 分类: HTML 发布于:2017-7-2 14:54 ė1058次浏览 61条评论

环境:Google Chrome 59.0.3071.115 | Bootstrap 3.3.7

这个问题碰到好几次了,用一次查一次,于是想到把他写下来。

首先说说什么叫置底,置底即让 footer 位置在页面最后(不是 fixed-bottom)。如果页面实际内容的长度不到一个屏幕,footer 将出现在屏幕底部。

比如一个 footer 是这样的


<footer class="panel-footer">
    <div class="container">
       Testing 123
    </div>
</footer>


在正常情况下,他虽然会在页面最后,但是如果页面实际内容长度不到一个屏幕,页面最后会出现空白,非常难看。我们的目的就是让他能在页面长度不到一个屏幕的情况下使其置底。

实现的 css 是这样的


html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 100px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
}


注意,其中 html 的 position 属性不是非必要的,如果没有他,即使页面内容长于一个屏幕,footer 也会出现在刚打开页面时的页面底部的位置并保持不动。min-height 属性是为了让 html 能充满屏幕,但是这还不够。

我们将 footer 的 position 属性改为 absolute 是为了使用 bottom 属性,这样我们就可以固定 footer 到底部。由于使用了 absolute ,因此我们必须定义 height 来使其正常工作。width 在一些情况下不是必须的,例如我们的 footer 的 class 设定了 panel-footer ,那么这就可以不定义。

需要非常注意的是,由于我们的 footer 使用了 absolute 布局,bottom 为 0 并且页面充满屏幕,因此我们目前 footer 定义的实际位置在屏幕外,这会导致布局错误一些浏览器中可以正确处理这种情况,footer 会如预期般出现在页面底部,但是如果在 footer 使用了 margin-top 依然会失效。因此我们需要在 body 中设置 margin-bottom 来为 footer 留出位置,而这个 margin-bottom 的距离必须和 footer 的高度一致。这样,我们就使得布局完全正确。

如果我们需要在 footer 中使用 margin-top 来和前面的元素保持一定距离,我们就要在 body 的 margin-bottom 中再增加相应长度来为 footer 留出正确的空位,否则 footer 中的 margin-top 将失效。例如在此例中,如果我们为 footer 设定 margin-top: 50px; 则 body 中的 margin-bottom 需要改为 150px;


如上操作,我们就可以在不影响 bootstrap 栅格系统的情况下使 footer 置底,小伙伴们欢呼雀跃!


本文出自 czp的装逼站,转载时请注明出处及相应链接。

0

评论

  1. steve 非主流浏览器 非主流操作系统 2017-09-29 23:34 回复

    Test comment on Mac OS 9.2
    发表于 iMac G3 (266Mhz)

发表评论

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


Ɣ回顶部