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

Question

我的页脚有问题。我有一个包含一些内容的页面，在某些设备上(如移动设备 - 在缩小 View 中)，我的页面内容不会填充父设备高度，而在某些设备上，它会。 页脚在这些不同的高度上产生了问题。当内容未填满父设备高度时，页脚会正确显示在页面底部，但当内容填满父设备高度并溢出时，页脚会显示在内容上方。

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

内容溢出的页脚(未正确显示)

图片质量不是那么清晰，但问题很明显。

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