Html 100%高、居中的人造柱，右柱带粘性页脚

给定一个双窗格100%高度的人造列布局，我尝试在右列中设置一个粘性页脚，如果浏览器视口太小而无法显示所有内容，则该页脚不会浮动在列的内容上

我当前的问题是，如果浏览器视口太小，页脚将漂浮在内容上

这就是我想要的：

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

说明：

侧边栏-必须延伸到浏览器视口的100%高度或2+3的组合高度（以较大者为准）

内容-不同数量的内容

页脚-固定高度的页脚。这要么在浏览器窗口的底部，要么在第2条内容的下方，以较大者为准

当前html：

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

---

任何帮助或提示，使页脚保持在内容下方，无论是什么，都将不胜感激。

您需要这样的东西吗

我想这就是你想要的概念：

将上述网站上的CSS/HTML应用于Nick制作的小提琴：

请注意，您需要将

#页脚

移动到

#包装

的外部

---

警告：

#侧边栏

将仅延伸到其自身内容的高度，而不是内容+

#页脚

的组合高度。通过给

#wrapper

侧边栏背景并使

#侧边栏的背景透明，您可以使
#侧边栏
显示为延伸整个长度。
这是基本前提，但是如果调整浏览器大小，您会发现绿色移到灰色上方。当绿色接触到灰色时，绿色应该停止向上移动，但下面注释的粘贴页脚上的链接也很有用。您发送的最新提琴具有工作代码，因此这是公认的解决方案。你能更新你的第一条评论吗？是的，关键是要有（1）的背景色，让它看起来像一个完整的列。如果有人感兴趣，我可以发布此代码。
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;
}