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

【问题标题】：Sticky footer overlaps the main content "WordPress Template"粘性页脚与主要内容“WordPress 模板”重叠
【发布时间】：2015-01-27 05:23:45
【问题描述】：

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

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

在此处查看页面：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%;
}

好的，现在它不会与内容重叠，但是当内容很短或为空时，我在内容和页脚之间有很大的差距。内容短时如何去掉滚动条，反之亦然。

【问题讨论】：

标签： html css wordpress

【解决方案1】：

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

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

【讨论】：

修复了重叠，但是当内容很短/为空时，页脚底部有一个很大的间隙。

【解决方案2】：

我的例子： 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

【讨论】：

所以就我而言，我正在为 WP 模板执行此操作。 #mycontent 将成为我的#main？ markestrada.co.uk/wdch/news这就是我之前给上面其他人的回复中提到的很大差距。

【解决方案3】：

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

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

【讨论】：