风动之石的博客

【中级】如何实现内容高度不够时 footer 吸底的效果

<div class="wrapper">
  <div class="content">
     内容区域
  </div>
  <div class="footer">footer 区域</div>
</div>
1
2
3
4
5
6

参考答案

方案一：min-height + absolute

html,
body {
  height: 100%;
}
.wrapper {
  position: relative;     /* 关键 */
  box-sizing: border-box;
  min-height: 100%;       /* 关键 */
}
.wrapper .content {
  padding-bottom: 100px;
}
.footer {
  position: absolute;     /* 关键 */
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;          /* 设置固定高度 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方案二：flexbox

html,
body {
  height: 100%;
}
.wrapper {
  min-height: 100%;       /* 关键 */
  display: flex;          /* 关键 */
  flex-direction: column; /* 关键 */
}
.wrapper .content {
  flex: 1; /* 关键 */
}

/* 高度可以不设置 */
.footer {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

方案三：min-height + calc

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%; /* 关键 */
}

.wrapper .content {
  min-height: calc(100% - 100px); /* 关键 */
}

/* 高度需要固定 */
.footer {
  height: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

参考：CSS实现footer“吸底”效果open in new window

可引申：footer常驻底部实现及文档流position、flex等