使元素的高度与相邻元素的动态定义高度相同

Question

我的网站上有三个方框 - 如上图所示。其中两个是动态大小的，即它们只适合它们内部的文本。问题是第三个框，在图片中标记为绿色，我想整齐地填充剩余的空间，即左框的高度 - 右框的高度（并减去边距）。我该怎么做呢？即我对三个盒子的设置本身没有任何问题，但我无法弄清楚如何在不预先确定每个盒子的高度的情况下将绿色盒子拉伸到所需的高度。

非常感谢

编辑：所以如果你只有2个盒子（即一个在左边，一个在右边），我想出了如何做到这一点。只需给出一个右边的“position：absolute”和“bottom：0px”和“top：0px”，它就会延伸到整个距离。无法弄清楚这个解决方案是否适用于我的案例，但是......

编辑：所以我想出了一个黑客来使用上面编辑中提到的方法来做到这一点。我使用“overflow：auto”为所有框创建一个容器div。我在左侧做了较大的方框，然后在右侧创建了绿色方框，其属性为“position：absolute; right：15px; top：0px; bottom：0px;”使其从顶部延伸到底部，与左侧的框相同。然后我添加第二个文本框，其中包含“float：left;”。我添加了第三个框，其中包含绿色框的文本 - 顶部有一个15 px厚的边框，颜色与背景相同（15px是我的边距btw的大小）。 Tadah！

...但是，如果有更容易/更清洁的方式，请回复！

Answer 1

编辑：正如@Marcus指出的那样，height:100%;在没有为父级设置高度的情况下无效。因此我写了一些JS来更好地完成工作。它获得左手面板的高度，然后在设置高度之前减去顶部面板和边距的高度。 jsFiddle

.bottomRight{
    width:50%;
    float:right;
    background-color:red;
    position:relative;
    top:15px;
    left:15px;
}
.topRight{
    width:50%;
    float:right;
    background-color:blue;
    position:relative;
    left:15px;
}

$(document).ready(function () {
    var mainHeight = $("#leftMain").height();
    var topHeight = $("#topRight").height();
    var newHeight = mainHeight - topHeight - 15;
    $("#bottomRight").css("height", newHeight);
});