移动的粘性页脚

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 像素。当您在移动设备中时，这也将减少对您身体内容的推动。

我实际上会先尝试减少行高，看看是否可以解决问题，然后删除“min”，看看是否有帮助。