1

三盒

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

非常感谢

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

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

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

4

1 回答 1

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);
});
于 2013-05-01T06:34:24.580 回答