html footer置底部

codepen演示地址:https://codepen.io/chriscoyier/pen/uwJjr

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>
* {
  margin: 0;
}

html, body {
// 先把html撑开
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* 相当于底部的高度 */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页