Html 粘性页脚与主要内容重叠；WordPress模板"；

我知道有关于粘脚的解决方案，但我都试过了。我打算做的是将页脚粘贴在页面底部，不管内容是短是长，而不使用position:fixed和fixefooter height

当页脚上没有太多内容时，页脚会粘在底部，但当下面有类似示例的内容时，页脚会与主要内容重叠

请参见此处的页面：

好吧，现在它没有重叠的内容，但我有一个很大的差距，在内容和页脚之间的内容是短或空的。当内容较短时，如何摆脱滚动条，反之亦然

---

您的

页脚高度远远大于
25px
，但您的
#main
的底部填充仅为
20px
（
页脚的总垂直填充）+
25px
。根据我的检查，实际计算高度为
245px
。所以试试这个：

padding-bottom: 265px; /* 245px (footer height) + 20px (footer total vert padding) */

移除
位置：绝对和
底部：0并改为添加
页边距顶部：-120px应该可以解决您的问题。css将是：

footer {
    width: 100%;
    background: #333;
    margin-top: -120px;
    padding: 10px 0;
}

从我的示例中：
溢出：应将自动
分配给
。模块内容
，并应具有
底部填充
，页脚高度为

#mycontent .module-content {
    float: left;
    width: 700px;
    overflow: auto;
    padding-bottom: 70px;
}
#footer {
    color: red;
    background: black;
    opacity: 0.6;
    height: 70px;
    margin-top: -70px;
    width: 100%;
    clear: both;
}

这修复了重叠，但当内容较短/为空时，页脚底部有一个很大的间隙。因此，在我的例子中，我是为WP模板这样做的#我的主要内容是什么？这就是我在上一次回复上述另一个人时提到的巨大差距。
#mycontent .module-content {
    float: left;
    width: 700px;
    overflow: auto;
    padding-bottom: 70px;
}
#footer {
    color: red;
    background: black;
    opacity: 0.6;
    height: 70px;
    margin-top: -70px;
    width: 100%;
    clear: both;
}