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

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

页脚在底部没有太多内容时粘在底部，但是当下面的内容像下面的内容那样与内容重叠时。

enter image description here

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

好了，现在不超过一圈的内容，但我已经在内容和页脚差距较大时，内容很短或空。当内容很短时，我该如何摆脱滚动条，反之亦然。

enter image description here

来源

2014-03-25 nCore

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

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

来源

2014-03-25 18:48:01 calvin

卸下position: absolute;和bottom: 0;和添加，而不是margin-top: -120px;应该解决您的问题。 CSS的将是：

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

来源

2014-03-25 18:48:17 Howli

那么这固定的重叠，但是当含量为短/空处有页脚的底部有很大差距。 – nCore

从我的例子： overflow: auto应分配给.module-content，它应该有页脚的height一个bottom-padding。

#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

来源

2014-03-25 19:05:49 newTag

所以在我的情况下，我正在为WP模板做这个。 #mycontent将成为我的#main？ http://markestrada.co.uk/wdch/news/这是我在上一次回复上面提到的其他人时提到的巨大差距。 – nCore

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

回答

相关问题