CSS Trick: Sticky Footer

发表于 | | 阅读次数

A sticky footer means the footer is always sticky to bottom and comes after the content.

固定的页脚是指页脚紧跟在内容区域后面，并且一直处于页面的底部。

That is to say, the position of Footer is independent with content’s height, it always sticky to the bottom of the page:

也就是说，无论内容的多少都不影响到Footer的位置，Footer总是出现在页面的最底部：

  • When height of content is greater than viewport’s height, Footer follows the content, so it won’t appear on the first screen.

    当页面的内容的高度大于Viewport的高度时，Footer的位置在内容之后，首屏是无法看见的；

  • When hegiht of content is less than viewport’s height, Footer still appear on the bottom of page.

    当页面的内容的高度少于Viewport的高度时，Footer依然保持在Viewport的底部；

Obviously, position: fixed does not suite for this case. Elements with position: fixed use viewport as the reference, so these elements will always appear at the bottom of viewport whatever the content’s height is. This does not meet the first requirment.

显然，position: fixed并不适用于当前的场景，因为fixed定位的元素是以viewport作为参照物，所以在fixed的情况下，无论内容多于少，这些元素总是出现在浏览器窗口的底部，这并不满足需求的第一个要求。

Rule position has two value to take elements out of normal flow, the first we just talk about, is fixed, the other one is absolute. Elements’s position with absolute is relative to thier parent whose position value is not static. So we can use this feature to design a container, it meets the following conditions:

元素脱离文档流的定位除了fixed以外，还有一个是absolute。使用absolute定位的元素是以最近一个position属性不是static的父元素作为参照物。此时，就可以设计一个Footer的参照容器，这个容器满足以下条件：

  • It should Wrap the content and Footer.

    包含内容和Footer.

  • It’s minimum height should be 100 percent of viewport.

    容器高度至少是viewport的100%.

For this container, it will be automaticlly expand when the content’s height is bigger than viewport’s; while the content’s height is less than viewport’s, the container still as tall as viewport so that Footer will locate at the bottom of the viewport.

满足以上条件的容器，在页面内容高度大于viewport的高度时，容器自动被撑开；当页面内容的高度小于viewport的高度时，自动取viewport的高度，从而保证Footer还是在页面的底部。

Enough theory, let’s take a look at the code.

讨论完足够的理论之后，让我们来看看代码。

HTML

1
2
3
4
5
6
7
<div class="container">
    <div class="header"></div>
    <div class="content-wrap">
        <div class="content"></div>
    </div>
    <div class="footer"></div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html, body { 
    /* For container-wrap to inherit */
    height: 100%;
}
.container-wrap {
    position: relative;
    min-height: 100%; /* 
}
.content {
    /* The space for footer */
    padding-bottom: $footerHeight;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: footerHeight;
}
0%