0

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

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

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

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

在此处输入图像描述

图像质量不是那么清晰，但问题清晰可见。

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

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

4

3 回答 3

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;
}
于 2013-08-09T19:24:13.960 回答
0

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

margin 0 auto;
于 2013-08-09T19:24:21.960 回答
0

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

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

于 2013-08-09T19:31:11.273 回答