由于高度不能实现粘性页脚：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

目前尚不清楚你在这里使用哪种解决方案，所以很难告诉你你做错了什么。

但是，我在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/

Answer 2

你可以这样做：

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