Question

我已经设置了一个绝对页脚位置，但随着更多内容的添加，它会覆盖内容。

我希望它位于页面底部，即使没有足够的内容将其推下来

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

CSS

#wrapper{
  position: relative;
  min-height: 100%;
}
#content{
  width: 900px;
  margin-top: 20px;
}
#footer{
  width: 100%;
  height: 140px;
  position: absolute;
  bottom: 0;
}

Answer 1

我不是肯定的，这正是你正在寻找的，但希望这会有所帮助。如果您希望您的页脚始终位于每个页面的底部，无论是否有足够的内容将其推下，您需要人们称之为“粘性”页脚。您可能会在Google上找到一些不同的方法，但这就是我所做的，虽然它要求您知道页脚div的高度。

首先从你的包装器中取出你的页脚div，然后将div放在与#wrapper相关的结束div标签之后。然后加填充底：140px; 箱尺寸：边界盒; 到你的CSS中的#wrapper。请注意，它与页脚的高度相同，这很重要！ box-sizing将告诉你的包装器div，填充不应该被添加到100％的高度，而是被带走。这将确保您不会获得任何滚动条，除非您确实有足够的内容需要它们。

第二，带走位置：绝对的; 底部：0; 明确：两者; 来自#footer，你不应该再需要这些了。然后添加margin-top：-140px;

最后，请确保您的css中包含以下内容：身体{ 身高：100％ } HTML { 身高：100％ }

希望这对您有用，它应该做的是保证页脚和您的内容不会重叠，并确保您的页脚始终从页面底部开始（除非您有更多内容可以进一步推动它下）。

Answer 2

在这里提供正确的解决方案有点困难，因为 #content 的内容可能会产生很大的影响。
到目前为止，根据您提供的代码，我唯一要说的是您的身体没有高度实际上，大多数包含的div都不在流程中（位置设置为固定或绝对）。

所以我唯一要补充的是你的CSS body{height: 100%;}

这应该有助于您的页脚位于页面底部

修改

现在，为了确保在 #content 之后显示您的页脚，您可以强制其顶部位于页面底部，如下所示：
#footer{top: 100%; bottom: 0;}

从那时起，您将能够为页脚添加一些margin-top：

#footer{top: 100%; bottom: 0; margin-top: 20px;}

Answer 3

使用div添加假边距

<div style='width:100%;height:160px;'></div>
<div id="footer"></div>

添加160px的假保证金也有效，但不是“最佳做法”

这也对我有用，但它不是一个动态的解决方案，它可能根据你的html结构和所需的定位不起作用。

绝对页脚涵盖内容

3 个答案: