Sticky Footer

这是我之前在SegmentFault上提的一个问题:SegmentFault

问题如下:

网页主体内容高度不定,如何让footer在高度太低的时候固定在底下,长的时候被顶下去?

一位网友贴了一段外国人写的代码上来,震惊到我了,好聪明!

HTML:

<div class="page-wrap">

  Content!

</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

原帖在这里:Sticky Footer



评论

暂无评论

在这里输入