html - 页面底部空白

Question

请访问 this website .

底部有一个空白区域。我检查了一下，我的 css 中没有提到最小高度。

我怀疑它在正文的 css 详细信息中，如下所示:

    body {
        line-height: 1.5;
        font-size: 87.5%;
        word-wrap: break-word;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0;
        border: 0;
        outline: 0;
        background: none repeat scroll 0 0 #EFEFEF;
    }
    
    html, body, #page {
        height: 100%;
    }

Answer 1

这消除了我在 Safari 6.0.3 中的流血现象；

#footer-wrapper {
    margin-top: 40px;
    background: url("../images/footer.png") repeat-x scroll 0 0;
    overflow: hidden;
}

您可能希望根据其中的内容以不同方式处理溢出。但这应该可以修复空白。

我通过从 DOM 自下而上删除节点来解决这个问题。它必须在 #footer-wrapper 中。由于 margin-bottom 不起作用，并且您使用的是相对定位，我认为这是从该元素中渗出的一些阴影样式。

更新(更好的修复)

刚找到问题的真正问题；

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

将 content: "."; 更改为 content: ""; 即可修复。或者完全删除该样式，因为它在那种情况下似乎没有用。