手机粘滞页脚

Question

在使用Bootstrap 3的网站上工作（http://www.patrickmanser.ch/fnws），我想做一个粘性页脚代码。我应用Bootstrap 3示例中使用的代码，将它们调整为我的尺寸。它在桌面监视器上完美运行。但是，如果切换到移动大小的屏幕，则页脚与内容重叠。我猜测，这是因为页脚的大小（高度）也在变化，因为我在那里使用网格系统。你可以看一下源代码（main.css的），但我认为最重要的部分是这些：

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    margin-bottom: 237px; 
    overflow-y: scroll; 
    background-color: #eee; 
} 

#page-footer { 
    position: absolute; 
    bottom: 0; 
    min-height: 200px; 
    background-color: #333; 
    width: 100%; 
    color: #999; 
} 

.copyright { 
    background-color: #222; 
    min-height: 50px; 
    color: #666; 
    width: 100%; 
    text-align: center; 
    line-height: 50px; 
} 

我不知道如何解决这个问题，或者如果它甚至可以得到妥善解决。任何提示都非常感谢！

Answer 1

在您的.copyright中，它是您的“最小高度：50px;”

如果您将其更改为“height：50px;”，则会减少顶部内容的上推。你需要调整它，以便不强迫它适应50px的行高;

或者，你也可以减少你的行高到像20像素一样短。这也会减少你在移动时对身体内容的推动力。

我会先尝试减小行高，看看是否修复它，然后删除“分钟”，看看是否有帮助。