我的粘页脚不起作用答案

【问题标题】：My sticky footer doesn't work我的粘页脚不起作用
【发布时间】：2013-04-19 06:04:44
【问题描述】：

我知道这个问题已经被问过很多次了，但我还没有找到真正适合我的解决方案。

我的html...

<body>
      <div id="container">
      </div>
      <div id="footer">
      </div>
</body>

我的 CSS....

body, html { min-height:100%;}

#container
  width: 980px;
  min-height: 100%;
  margin: 0 auto;}

footer {
  background-color: rgb(90,200,219);
  height: 50px;
  position: realative;
  margin-top: -50px;
  width: 100%; }

发生了什么，页脚完全粘在页面底部。但是，当内容很短时，我仍然需要向下滚动才能找到粘在底部的页脚。有人能告诉我我的代码有什么问题吗？

【问题讨论】：

有几个错别字； #footer 和 position: relative;.
啊，是的。那是我把它放在这里不同。我的实际代码没有错别字

标签： html css sticky-footer

【解决方案1】：

我认为你应该修复你的 CSS sn-p，因为它有很多问题。下次使用复制和粘贴将其放在这里，这样您的错字就不会让任何人失望。

body, html { min-height:100%; }

那应该是height:100%;，但我认为这可能是一个错字，因为你说页脚粘在底部，如果那行真的在你的实际 CSS 中就不会。

#container 缺少括号，应为#container {。

如果这些问题得到解决，除了@Owlvark 指出的问题。在jsFiddle 似乎工作正常。我能想到的唯一改进是将margin: 0px; 添加到body, html，这可能是您的问题，因为它消除了一些会呈现垂直滚动条的额外空间。但是当您说必须“向下滚动以查找页脚”时，您的问题似乎更严重。

【讨论】：

【解决方案2】：

试试我总结的这些方法。 https://gist.github.com/derek-duncan-snippets/4228927

body, html { /*body and html have to be 100% to push header down */
    height:100%;
    width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id.  Position relative IMPORTANT */
    position: relative;
    height: auto;
    min-height: 100%;
}
#header {
    height: 100px;
    background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
    padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
    height: 100px;
    width: 100%;
    background: rgba(255,255,255,0.2);
    position: absolute;
    bottom: 0;
}

【讨论】：

谢谢！将 height: 100% 添加到 body 和 html 就可以了