html - 粘性页脚略低于折叠

Question

我正在尝试实现一个粘性页脚，例如 this但是如果我的内容比页脚短，仍然会部分出现在首屏之后。我可以看到大约 25 像素，我必须向下滚动才能看到其余部分。这是相关的 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/

在 p 上将 margin-top 更改为 padding-top 一切正常。