粘性页脚略低于折叠

Question

我试图实现粘性页脚，例如this，但如果我的内容比页脚更短，则部分仍会显示在页面上方。我可以看到它的大约25px，我必须向下滚动才能看到其余部分。这是相关的CSS：

* {
    box-sizing:border-box;
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    margin-bottom: -60px;
}
.wrapper:after {
    content: "";
    display: block;
}

.footer, .wrapper:after {height: 60px;}

我使用的是Chrome，但Safari中也存在这个问题。我没有使用伪选择器就试过了，但我遇到了类似的问题。除了页脚之外，我的所有内容都包含在包装器div中。

Answer 1

由于计算height的方式，使用粘性页脚时，垂直边距会导致问题，可以在此处看到： http://jsfiddle.net/b9Zy7/

在margin-top上将padding-top更改为p，一切顺利。