页脚不会停留在内容的底部

Question

When i have a few content with work well. And if i just put something like a bunch of
it work fine as well. And if i remove the content from #content, it does work too. Since there`s too many code i'll be pasting ti on pastebin. On this screenshot the problem is shown: http://postimage.org/image/ee448x5yp/ the footer is the black part and the green part is the html, body as you can see on the css. Any possible solution? :(

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;
}

WHOLE SITUATION FIDDLE

http://jsfiddle.net/Vmvrd/

Answer 1

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

Answer 2

There are elements in your footer that are taller than it. They expand the body , but not the footer, since the footer's height is fixed. Add overflow: hidden to your #footer , and work from there.