html - 移动设备的粘性页脚

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 中，它是您的“最小高度:50 像素；”

如果您将其更改为“高度:50 像素；”，它会减少对顶部正文内容的插入。您需要对其进行调整，以免强制它适应 50 像素的行高；

或者，您也可以将行高降低到更短的值，例如 20px。当您使用移动设备时，这也会减少对您 body 内容的插入。

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