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

【问题标题】：Footer is not being shown properly on different device heights在不同的设备高度上未正确显示页脚
【发布时间】：2013-08-11 19:44:52
【问题描述】：

我的页脚有问题。我有一个包含一些内容的页面，并且在某些设备上（如移动设备 - 缩小视图），我的页面内容没有填充父设备高度，而在某些设备上，它确实如此。页脚正在创建这些不同高度的问题。当内容未填满父设备高度时，页脚会正确显示在页面底部，但当内容填满父设备高度并溢出时，页脚会显示在内容上方。

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

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

图片质量不是很清楚，但问题很明显。

这是我到现在一直在使用的 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;
 }

如何解决这个问题？当内容溢出时，我想在页面末尾显示页脚。

【问题讨论】：

标签： css footer sticky-footer

【解决方案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;
}

【讨论】：

我已经编辑了我的评论。你能模仿那个 HTML 结构吗（见小提琴：jsfiddle.net/ryanwheale/5LSQ4）
它有效，但是当内容溢出时，它会在内容和页脚之间留出额外的空白
我认为现在页脚取决于主要元素的边距。它不会在较少的内容中正确显示页脚

【解决方案2】：

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

将其居中

margin 0 auto;

【讨论】：

【解决方案3】：

如果您需要绝对定位页脚，您可以随时为 body 元素添加一个 margin-bottom 或 padding-bottom。只需将其设为绝对定位元素的 100 像素，它就会强制将内容置于定位元素之上。

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

【讨论】：