<div class="wrap">
  <p>读者可以注释或添加p标签高度测试</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
  <p>e</p>
</div>
<div class="footer">
  这是footer
</div>
* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%
}
.wrap {
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
  margin-bottom: -60px;
}
/*
没有这个伪元素占据位置,wrap下面会跟footer重叠,读者可以自行测试
*/
.wrap:after {
  content: "";
  height: 60px;
  display: block;
}
.footer {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.