页脚未在不同设备高度上正确显示

Question

我的页脚有问题。我有一个包含一些内容的页面和某些设备（如移动设备 - 缩小视图）我的页面内容不会填充父设备高度，而在某些设备上，它确实如此。 页脚正在创造这些不同高度的问题。当内容未填充父设备高度时，页脚在页面底部正确显示，但当内容填充父设备高度并溢出时，页脚将显示在内容上。我可能不清楚英语，但这些屏幕快照会让你清楚。

内容未填充父级高度（正确显示）的页脚

内容溢出的页脚（页脚未正确显示）

画质不是很清楚，但仍然可以看到。

这是CSS代码，我一直在使用。

#footer{
     display:block;
     margin-right:auto;
     margin-left:auto;
     position:absolute;
     bottom:0;
     height:100px;
     width: 60%;
     text-align:center;
     color:green;
     font-size:18px;
     font-family:Times;
 }

这可以修复吗？我希望在内容溢出时在页面末尾显示页脚。 任何帮助将不胜感激。

Answer 1

在页脚前面的#main元素上（假设您使用id="main"作为带绿色边框的项目，请执行以下操作：

#main {
    margin-bottom: 100px;
}

编辑：

<div id="wrapper">
  <div id="header"></div>
  <div id="main"></div>
  <div id="footer"></div>
</div>

#wrapper {
    position: relative;
    padding-bottom: 110px;
}

Answer 2

每当你定位一些绝对的东西你就把它带到DOM之外，这意味着在这种情况下它位于底部0（基于你的css）到最近的相对定位的元素。我将页脚html放在你的包装或内容块之后，然后通过说

使它居中

margin 0 auto;

Answer 3

如果您需要将页脚绝对定位，则可以始终在body元素中添加margin-bottom或padding-bottom。只需将它放在绝对定位元素的100px上，它就应该强制定位元素上方的内容。

或者，您可以将页脚设置为静态，但是当内容太短时，您将失去页脚位于屏幕底部的能力。