网站底部内容始终置于页面最底端

发表于   |   分类于

最近做了一个PC项目，由于页面比较短，在大屏电脑中，下面有一部分是空白，显得整个网站很不协调。

例如，妙味课堂官网在大屏电脑下也差不多：

针对此问题设计师提出了一个建议：如果页面高度不够，就让网站底部的内容在大屏电脑中始终置于浏览器最底端，如果页面高度足够，就保持现在的状况，拉到底部才显示底部内容。

我想到了如下方案：

  1. footer设置position:absolute;bottom:0;等属性
  2. html和body设置min-height:100%;

这样的方案按理说应该是可取的，可是测试后发现：当浏览器没有滚动条时是Ok的，有滚动条时就有问题，这个时候footer始终处于window的高度的那个位置，并不是页面最底端。其实，有没有给html和body设置min-height:100%效果是一样的，这句代码并没有生效。

究其原因，比较复杂。当绝对定位元素如果没有设置定位父级，其实并不是相对于html或body定位，而是相对initial containing block定位的。initial containing block 是以整个 canvas （渲染内容的空间）的坐标原点(左上)为基准，以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。

然后，我得出了这样的解决方案（目测兼容所有浏览器）：

  1. 直接给footer设置绝对定位且bottom:0。当页面有滚动条时，使用js给body设置相对定位即可（如果给html那么IE6-7不兼容）。
  2. 由于我们经常会把浏览器缩小放大来进行测试，所以要封装一个函数，当浏览器窗口大小改变时就执行依次该函数。

通过以上思路我写出了js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function posFooter(){
    var body = document.getElementsByTagName('body')[0],
        bodyHeight = body.offsetHeight;
        winHeight = document.documentElement.clientHeight;
    if(bodyHeight > winHeight){
        body.style.position = 'relative';
    } else{
        body.style.position = '';
    }
}
posFooter();
window.onresize = posFooter;

但是这个方法有个问题：如果js加载较慢，footer可能会先处于没有加js的状态然后立刻跳到加完js的状态，那种跳动让人感觉很不爽！

后来我突然发现，我的这个博客的footer居然就是我想要的效果！而且没有任何bug！查看了一下源代码，居然发现开发这个博客框架的大神居然没有用js，直接用css就解决了。整理了一下思路，总结了最精简的代码如下（兼容所有浏览器）：

1
2
3
4
5
6
7
8
9
10
html {
    height: 100%;
}
body {
    position: relative;
    min-height: 100%;
    *height: 100%;
    padding-bottom: 100px; // 给footer占位的高度
    box-sizing: border-box;
}

注意：由于box-sizing: border-box不兼容IE6-7，所以这个方法只兼容IE8+。如果想要兼容IE7，可以把网站主内容区（footer前面的div）加padding-bottom，或者用加多一层结构：

1
2
3
4
5
6
7
<html>
  <body>
    <div class="g-wrap">
      <!-- 这里是网站内容 -->
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
html {
    height: 100%;
}
body {
    position: relative;
    min-height: 100%;
    *height: 100%;
}
.g-wrap{
    padding-bottom: 100px; // 给footer占位的高度
}

参考资料：
https://www.zhihu.com/question/19926700/answer/13376153 （作者：顾轶灵 来源：知乎）
http://www.w3.org/TR/CSS2/intro.html#canvas

—— end —— 注：水平有限，难免有误，如有错误欢迎指出！