100％高度，居中的人造柱，右栏有粘性页脚

Question

鉴于2个基于100％高度的虚拟列布局，我试图在右列中有一个粘性页脚，如果浏览器视口太小而无法显示所有内容，则不会浮动在列的内容上。

我目前的问题是，如果浏览器视口很小，页脚将浮动内容。

这就是我所追求的：

使用下面的代码，但页脚（3）将移动到内容（2）上。

说明：

1. 侧边栏 - 这必须延伸到浏览器视口的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/

Answer 2

我认为这是您正在寻找的概念：http://www.cssstickyfooter.com/

将上面网站上的CSS / HTML应用于Nick制作的小提琴：http://jsfiddle.net/L6BLa/2/

请注意，您需要将#footer移至#wrapper的外。

警告： #sidebar只会扩展到其内容的高度，不 #content + {{的组合高度1}}。您可以通过#footer侧边栏背景并使#sidebar的背景透明来使#wrapper 显示以延长全长。