粘贴页脚

发表于 | 更新于: | 分类于 | 浏览
字数统计: 93 | 阅读时长 ≈ 1

内容不足时，页脚固定在页面底部

HTML

1
2
3
4
5
<body>
  <header>头部</header>
  <main>内容</main>
  <footer>页脚</footer>
</body>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
header{
  line-height: 100px;
  text-align: center;
  color: #ffff;
  background: #333;
}
main{
  flex: 1;
  text-align: center;
  
}
footer{
  line-height: 100px;
  text-align: center;
  color: #ffff;
  background: #333;
}

预览

服务器开小差了-_-!