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

Question

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

非常感谢

编辑:所以我想出了如果你只有 2 个盒子(即一个在左边，一个在右边)时该怎么做。只需给右边的“position: absolute”和“bottom:0px”和“top:0px”，它就会延伸整个距离。虽然无法弄清楚此解决方案是否/如何适用于我的情况...

编辑:所以我想出了一个 hack 来使用上面编辑中提到的方法来完成它。我为所有带有“溢出:自动”的盒子制作了一个容器 div。我在左侧创建较大的框，然后在右侧创建绿色框，属性为“position:absolute;right:15px;top:0px;bottom:0px;”使它从顶部延伸到底部，与左边的盒子高度相同。然后我添加带有“float:left;”的第二个文本框。我添加了第三个框，它将包含绿色框的文本 - 其顶部有一个 15 px 粗的边框，颜色与背景相同(顺便说一句，15px 是我的边距的大小)。他达!

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

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