我想用 HTML5 / CSS3 做以下事情（完全符合浏览器会很好，但不是完全必要的——到目前为止，我正在使用 firefox 4b12、safari 和 chrome 进行测试）：
我有以下html结构：
<div id=contentwrapper>
<aside>
<div id=child1></div>
<div id=child2></div>
</aside>
(<div id=maincontent></div>)
</div>
我想要做的是以下内容：
contentwrapper 设置位置固定，顶部 20，底部 20px（= 使用固定页眉和页脚之间的所有空间）。
旁边设置为 100% 高度（使用内容包装器的所有空间！）
child1 具有可变内容（可能由 CSS 或用户交互的 DOM 操作更改），因此它的高度设置为 auto 以相应地调整它的高度。
child2 也有可变内容。但我希望这个 div 使用所有可用的垂直空间，这些空间留在旁边并且不被 child1 占用。如果它的内容需要更多空间，则有一个 overflow:auto 必要时制作滚动条。
整个列之后是一个向右浮动的主要内容区域。不过，这应该与我的问题无关。
到目前为止我尝试了什么：
我不能将 child2 的高度设置为 auto 或 100% 或固定值（可能很大，没有滚动条，不知道用户窗口高度，...）。
我不能使用 position:fixed 和 top+bottom 值，因为这不会查看 child1，而是相对于一边呈现。
我不能使用 display:table，因为元素确实具有不适用于表格单元格的边框/格式。
我希望你能理解这个问题，也许有一个聪明的解决方案......
编辑：这是我的问题的截图：
在视图 1 中，您可以看到当视口足够高时发生的情况。
在视图2中，没有足够的空间，child2在页脚下向下滑动...
我想要的是那个 child2 可以得到所有的高度，但是滚动它的内容。
感谢您的帮助
塞巴斯蒂安