固定 footer 到 Html 底部

一、一直显示在页面底部

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


footer {
  position: fixed;
  z-index: 99;
  color: rgba(200, 200, 200, 1);
  width: 100%;
  height: 20px;
  bottom: 0px;
  text-align: center;
  text-shadow: 1px rgb(50, 50, 50);
}

二、有滚动条时显示在所有内容的最后，无滚动条时显示在页面底部

1
2
3
4
5
6
7
8
9


footer {
  margin-top: 10px;
  z-index: 99;
  color: rgba(200, 200, 200, 1);
  width: 100%;
  height: 20px;
  text-align: center;
  text-shadow: 1px rgb(50, 50, 50);
}