html - 页脚不会与内容一起停留在底部

Question

当我有一些内容时工作得很好。如果我只是放一些类似的东西，
它也可以正常工作。如果我从#content 中删除内容，它也会起作用。由于代码太多，我将把 ti 粘贴到 pastebin 上。在此屏幕截图中显示了问题：http: //postimage.org/image/ee448x5yp/ 页脚是黑色部分，绿色部分是 html，如您在 css 上看到的正文。任何可能的解决方案？:(

HTML

<div id="wrap">
    <div id="header">
        ...
    </div>
    <div id="content">
        <div class="center">
                ...
        </div>
    </div>
    <div id="footer">
        ...
    </div>
  </div>

CSS

#wrap {
    width: 100%;
    min-height: 100%;
    margin: 0 auto -75px; /* the bottom margin is the negative value of the footer's   height */
    position: relative;
    text-align: left;
}

#footer {
  position: absolute;
  bottom: 0;
  height: 75px; /* Height of the footer */
  width: 100%;
  background: #000;
  text-align: center;
  line-height: 103px;
}

整体情况小提琴

http://jsfiddle.net/Vmvrd/

Answer 1

我认为它工作正常，看看我添加到您编辑的帖子中的小提琴示例。

Answer 2

页脚中有比它高的元素。body由于页脚的高度是固定的，因此它们会扩展，但不会扩展页脚。添加overflow: hidden到您的#footer, 并从那里开始工作。