网站footer沉底效果的解决方案

2019-08-26

很多网站设计一般是三个部分组成，header + content + footer，header 里面展示着网站头部的导航 logo 等信息，content 里面装的是网站主体内容，footer 里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现两种情况：

一、由于主体内容太少的原因，你会看到底部模块没有固定在底部而是往上跑了，跟在主体内容后面。

二、主体内容较长时，底部模块跟在内容后面滑动，这就正常的情况下。

在 PC 端这种问题还是很常见的，今天总结了一下实现这种布局的几个方法。

1、 使用 js 计算

主要思路是：在页面加载完成后计算屏幕高度 - header 头部的真实高度 - content 内容真实的高度的值，如果差值大于
footer 的高度，就给 footer 的 style 加上 fixed 定位，使它固定在屏幕底部。
demo 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
  <head>
    <title>footer沉底效果</title>
    <style type="text/css">
      div {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      #container {
        width: 100%;
        height: 100%;
      }
      #header {
        background: green;
      }
      #content {
        background: blue;
      }
      #footer {
        width: 100%;
        height: 100px;
        background: red;
      }
      .footer-fixed {
        position: fixed;
        left: 0;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header">header</div>
      <div id="content">content</div>
      <div id="footer">footer</div>
    </div>

    <script type="text/javascript">
      var height =
        document.getElementById("container").clientHeight -
        document.getElementById("header").clientHeight;
      -document.getElementById("content").clientHeight;
      // 这里给footer加上另外的class,使其固定
      if (height > 100)
        document.getElementById("footer").classList.add("footer-fixed");
    </script>
  </body>
</html>

2、 采用 flex 布局 + min-height

flex 布局中的 justify-content: space-between;搭配超级好用的 min-height，刚好可以满足在 content 内容不足的时候，footer 的沉底效果
demo 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
  <head>
    <title>footer沉底效果</title>
    <style type="text/css">
      div {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #header {
        width: 100%;
        height: 20px;
        background: green;
      }
      #container {
        width: 100%;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      #content {
        background: blue;
      }
      #footer {
        width: 100%;
        height: 100px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header">header</div>
      <div id="content">
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
      </div>
      <div id="footer">footer</div>
    </div>
  </body>
</html>

min-height 实在是超级好用的一个 css 属性了，搭配 flex 轻松实现沉底效果。

3、 巧用 flex + margin-top

这个技巧是在讲 margin auto 的妙用中学到的，在 flex 格式化上下文中，margin auto 会自动去分配剩余空间。这里面我们可以在 footer 上使用 margin-top:auto 来达到沉底效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
  <head>
    <title>footer沉底效果</title>
    <style type="text/css">
      div {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #container {
        width: 100%;
        min-height: 100%;
        display: flex;
        flex-direction: column;
      }
      #header {
        background: green;
      }
      #content {
        background: blue;
      }
      #footer {
        width: 100%;
        height: 100px;
        background: red;
        margin-top: auto;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header">header</div>
      <div id="content">
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
        content <br />
      </div>
      <div id="footer">footer</div>
    </div>
  </body>
</html>

这三种效果好像没什么副作用，我一般用 JS 处理比较多，flex 布局自己不怎么擅长，这次算是研究了一下。

© 2022 一个爱听歌的搬砖工 - Powered by Hexo - Theme Chan