html - 100% 高度，居中的人造列，右列有粘性页脚

Question

给定一个基于 2 Pane 100% 高度的人造列布局，如果浏览器视口(viewport)太小而无法显示所有内容，我试图在右列中设置一个粘性页脚，该页脚不会浮在列的内容上。

我目前的问题是，如果浏览器视口(viewport)太小，页脚会浮在内容上。

这就是我想要的:

使用下面的代码，虽然页脚 (3) 将移动到内容 (2) 上。

解释:

1. 侧边栏 - 这必须扩展到浏览器视口(viewport)的 100% 高度或 2+3 的组合高度(以较大者为准)
2. 内容 - 不同数量的内容。
3. 页脚 - 固定高度的页脚。这要么在浏览器窗口的底部，要么在 2 号内容的下方，以较大者为准。

当前 html:

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content">
        <div id="footer"></footer>
    </div>
</div>

当前的CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#wrapper {
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
#sidebar {
    width: 400px;
    height: 100%;
    float: left;
}
#content {
    width: 600px;
    float: left;
}
#footer {
    position: absolute;
    bottom: 0;
    height:200px;
}

任何使页脚保持在内容下方的帮助或指示都将不胜感激。

Answer 1

您需要这样的东西吗？ http://jsfiddle.net/L6BLa/3/