由于高度，无法实现粘性页脚：100% 问题

Question

对于带有long content 的页面，我的网站看起来不错，但在带有short content 的页面上，页脚向上移动（编辑：链接现在显示一个正常工作的粘性页脚）。我已经尝试了多种解决方案，但我无法让它们中的任何一个起作用（在这里不起作用是页脚不粘，或者它出现在页面中间）。我试过this solution 和this one（我已经删除了这两种解决方案，所以我可以重新开始）。例如，如果您进入 chrome 开发人员工具或 firebug 并将height:100% 添加到#wrapper div（这实际上是使其工作的第一步），高度超过 100%，并且页脚不在底部。

基本的div结构如下：

<div id="wrapper">
  <div id="container">
    <div id="content">
      <div class="post"></div> <!-- floats left -->
      <div id="sidebar></div> <!-- floats right -->
      <div style="clear:both"></div> <!-- clear hack -->
    </div>
  </div>
</div>
<div id="footer"></div>

以下是相关 div 的 CSS：

html {
    height: 100%;
}
body {
    min-width:900px;
    height: 100%;
}
#container {
    height: 100%;
    padding: 20px;
    background: #f4f4f4;
}
#content {
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    margin: auto;
    width: 80%;
    max-width: 1000px;
    min-width:800px;
    padding: 10px;
    background: white;
    -moz-box-shadow: 0px 2px 6px 3px #C0C0C0;
    -webkit-box-shadow: 0px 2px 6px 3px #C0C0C0;
    box-shadow: 0px 2px 6px 3px #C0C0C0;
}
#footer {
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    background: #101010;
    height: 14em;
    color: white;
}

/* These two are probably less important */
#sidebar {
    float: right;
    height: 100%;
    margin: 15px 25px;

    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    -moz-box-shadow: 0px 0px 7px #000000;
    -webkit-box-shadow: 0px 0px 7px #000000;
    box-shadow: 0px 0px 7px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#dcedeb');
    /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#dcedeb')";
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    background-image: -moz-linear-gradient(top, #ffffff, #dcedeb);
    background-image: -ms-linear-gradient(top, #ffffff, #dcedeb);
    background-image: -o-linear-gradient(top, #ffffff, #dcedeb);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#dcedeb));
    background-image: -webkit-linear-gradient(top, #ffffff, #dcedeb);
    background-image: linear-gradient(top, #ffffff, #dcedeb);
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
}
.post {
    width: 100%;
    float: left;
    height: 100%;
}

任何人都可以使用 firebug 或 CDT 之类的东西来弄清楚为什么 100% 的高度不起作用以及如何获得粘性页脚吗？

编辑：

按照@ajkochanowicz 的描述实施 Ryan Fait 的解决方案后，页面如下所示：

您可以看到灰色背景（即#container div 的背景）没有延伸到#wrapper div 的底部，即使两者都有height: 100%。

Answer 1

你可以这样做：

body {height: auto; padding-bottom: 160px;}
#footer {position: fixed; bottom: 0;}

Answer 2

不清楚您在此处使用的哪个解决方案，因此很难告诉您您做错了什么。

但是，我在 Ryan Fait's solution 上取得了成功，我在这里看不到任何代码。

如果您对网站开发不太了解，可以下载Kickstrap，它已经插入并可以使用。

否则，您将需要此 CSS

* { margin: 0; }
html, body { height: 100%; }
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
}
#footer, #push { height: 142px; }

然后将#push div 添加到您的标记中：

<div id="wrapper">
  <div id="container">
    <div id="content">
      <div class="post"></div> <!-- floats left -->
      <div id="sidebar></div> <!-- floats right -->
      <div style="clear:both"></div> <!-- clear hack -->
    </div>
  </div>
  <div id="push"></div>
</div>
<div id="footer"></div>

另外不要忘记编辑“142px”值以匹配您所需的页脚高度。

编辑 为了阐明固定页脚和粘性页脚之间的区别，这里有一个固定页脚： http://jsfiddle.net/y48Su/

这是使用 Ryan Fait 的解决方案实现的粘性页脚： http://jsfiddle.net/X6UB7/