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

Question

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

非常感谢

编辑：所以我想出了如果你只有 2 个盒子（即左边一个，右边一个）的方法。只需给出右侧的“位置：绝对”和“底部：0px”和“顶部：0px”，它就会延伸整个距离。无法弄清楚这个解决方案是否/如何适用于我的情况......

编辑：所以我想出了一个技巧来使用上面编辑中提到的方法来完成它。我为所有带有“溢出：自动”的框制作了一个容器 div。我在左侧制作较大的框，然后在右侧创建具有属性“位置：绝对；右：15px；顶部：0px；底部：0px；”的绿色框使其从顶部延伸到底部，与左侧框的高度相同。然后我添加带有“float:left;”的第二个文本框。我添加了第三个框，它将包含绿色框的文本 - 在其顶部有一个 15 像素厚的边框，与背景颜色相同（顺便说一句，15 像素是我的边距的大小）。塔达！

...但是，如果有更简单/更清洁的方法，请回复！

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);
});