CSS粘性底部

作者：Ryan Fait

我 E 文不好，不过代码看的懂

该文实现粘性居底的核心方法，就是负 margin。先用一个容器 wrapper 包住除 footer 以外的内容。将 wrapper 的高度设置为 100% ,再用负的 margin 空出 footer 高度。如此实际 wrapper 的高度应等于 100%-footer.height，效果达成。

作者在 HTML 中加了一个和 footer 一样高度的 push 容器

没理解什么意思，可能是用来 hack 的。谁知道的话，我们探讨一下

把代码贴上

<html>
  <body>
    <div class="wrapper">
      <p>
        Your website content here.
      </p>
      <div class="push"></div>
    </div>
    <div class="footer">
      <p>
        Copyright (c) 2008
      </p>
    </div>
  </body>
</html>

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
  height: 4em; /* .push must be the same height as .footer */
}