绝对页脚覆盖内容

Question

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

I want it to be at the bottom of the page even if there is not enough content to push it down

   <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

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

所以我唯一要添加到您的 css 的是

body{height: 100%;}

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

编辑

现在，要确保您的页脚显示在 #content 之后，您可以使用类似这样的内容强制其顶部位于页面底部

#footer{top: 100%; bottom: 0;}

从那时起，您还可以在页脚中添加一些 margin-top：

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

Answer 2

我不确定这是否正是您要找的，但希望这对您有所帮助。如果你想让你的页脚总是在每一页的底部，不管有没有足够的内容把它往下推，你需要人们所说的 "sticky" 页脚。您可能会在 Google 上找到几种不同的方法，但这就是我所做的，尽管它要求您知道页脚的高度 div.

首先将页脚 div 从包装中取出，只需将 div 放在与 #wrapper 相关的结尾 div 标记之后。然后加 padding-bottom:140px; box-sizing:border-box; 在你的 css 中添加 #wrapper。请注意，它与页脚的高度相同，这很重要！ box-sizing 将告诉您的包装器 div 不应将填充添加到 100% 高度，而是将其移除。这将确保您不会获得任何滚动条，除非您实际上有足够的内容需要它们。

二、带走 position:absolute; bottom:0; clear:both; 来自#footer，你不应该再需要这些了。然后添加 margin-top:-140px;

最后，请确保您的 css 中有这些： body{ height:100% } html{ height:100% }

希望这对你有用，它应该做的是保证页脚和你的内容没有重叠，并确保你的页脚总是从页面底部开始（除非你有更多的内容来推送它甚至更远）。

绝对页脚覆盖内容

Absolute Footer Covers The Content

html

css

css-position

footer

absolute