粘性页脚略低于折叠显示

Question

我想实现一个棘手的页脚，如本 ，但如果我的内容比页脚短仍部分出现过倍。 我可以看到大约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中也存在此问题。 我尝试过不使用伪选择器，但是有类似的问题。 除了页脚，我所有的内容都包装在wrapper div中。

Answer 1

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

将p margin-top更改为padding-top ，一切都很好。