Html 具有一个可变高度行和填充区域的可变全高布局

我正在尝试一种布局，它必须支持嵌套，并且在不使用javascript的情况下工作（当前的生产解决方案使用js并遇到性能问题）

不幸的是，我必须在IE8之前支持IE，所以我也不能使用像flex布局这样的花哨的东西，这将使这成为一项琐碎的任务

这是我目前的尝试

外部300px仅用于测试目的。最终的解决方案必须完全适应它的父级

从外观上看，如果没有flexbox/javascript，这似乎是不可能的，只要“内容”行可以具有可变的高度（否则很容易使用嵌套+位置+框大小）

我也尝试过改变这一点：

包括#viewportLimit to height:100%希望强制他们继承其父级高度，这对firebug的布局选项卡有效，但对渲染没有影响

我已经没有主意了，我希望有人能向我抛出主意

我想小提琴指出了我要做的事情。我想要浅蓝色的元素来填充深蓝色的方块。该元素稍后应该是可按需滚动的（与基于js的维度计算相比，该元素所需的javascript最少），但我可以自己解决这个问题

---

我所需要的帮助就是让它暂时占用全部空间。

那么，问题是什么？你想做什么？@Urahara添加了一些信息以供澄清。那里没有正方形。。现在还不清楚你想做什么。。你知道，我开始认为，如果你的方法让你陷入困境，你应该重新考虑。