CSS粘性底部

发表于 分类于 评论数： 本文字数： 823 阅读时长 ≈ 1 分钟

原文： A CSS sticky footer

作者：Ryan Fait

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

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

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

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

把代码贴上

1
2
3
4
5
6
7
8
9
10
11
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
* {
  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 */
}