粘性页脚重叠主要内容“WordPress模板”

Question

我知道有关于粘性页脚的解决方案，但我尝试了所有这些。我打算做的是将页脚粘贴在页面底部，无论内容是短还是长，而不使用位置：固定并修复页脚高度。

如果页脚上的内容不多，则页脚会粘在底部，但是当下面的示例中的内容与主要内容重叠时，页脚就会粘在底部。

请参阅此处的页面：Click to see the page

footer {
position:absolute;
bottom:0;
width:100%;
background:#333;
padding:10px 0; /*paddingtop+bottom 20*/
}

.wrapper{
   min-height:100%;
   position:relative;
}

#main{
   padding:10px;
   padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
   height:100%;
}

好了，现在它并没有超过内容，但是当内容短或空时我在内容和页脚之间存在很大差距。当内容很短时，如何摆脱滚动条，反之亦然。

Answer 1

删除position: absolute;和bottom: 0;并添加margin-top: -120px;可以解决您的问题。 css将是：

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

Answer 2

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

245px

Answer 3

来自我的示例： 应将overflow: auto分配给.module-content，并且bottom-padding应该有height页脚。

#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;
}

See demo