如何在绝对位置伸展，但仍然低于另一个项目？

Question

基本上我想要完成的是：

+---------------------+
|+-------------------+|
||      topbar       ||
|+-------------------+|
||                   ||
||     expanding     ||
||                   ||
|+-------------------+|
+---------------------+

有一些约束：

1. topbar可以自行调整大小（使用javascript），但始终是固定的高度+宽度
2. 扩展必须填充其余空间，无论其内容大小如何
3. 绝对位于展开位置的任何项目必须相对于顶部栏的左下角
4. 扩展的大小不能用javascript（即纯粹的css）设置
5. 我希望扩大.topbar的高度，而无需手动/编程调整.expanding的高度。即.expanding div应该自动调整。

我试过了：

.topbar {
    width:100%;
    height:100px;
}
.expanding {
    position:absolute;
    top:100px;
    left:0;
    right:0;
    bottom:0;
}

然后它将顶杆的高度与扩展相结合，如果我不需要，我不想这样做。

jsfiddle：http://jsfiddle.net/s2wq48np/