Javascript 相等于一个高度的叠层div

正在寻找一个解决方案，其中我可以根据三个div的总高度更改一个div的高度（其中一个根据内容而变化）。

绿色Div将根据内容更改高度。黄色的潜水艇没有。我想根据左三个div的总高度更改蓝色div的高度。我正试图让所有跳水运动员的上下都能配合起来

Jquery对于我的站点来说是一个不错的选择，我只是不确定如何设置它

---

谢谢您的帮助。

首先要添加jquery，您只需将此行添加到页面中即可

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

---

播放调整文本区域大小：

---

我为这个问题创建了一个JS提琴：

每次单击绿色文本时，它都会加倍

这会让你到达你需要的地方

jQuery(".blue").css("height", jQuery("#left").outerHeight());

---

基本上每次green扩展上面的行时都会更改样式以匹配。

我可以想到两个半纯CSS解决方案

第一种解决方案需要将所有四个div包装在一个容器元素中，并将

位置：relative设置为它

然后可以绝对定位蓝色div，并强制其继承容器/包装器高度（来自黄色和绿色div的总高度），如下所示：

蓝色div的宽度可以显式设置，也可以使用
left
，具体取决于布局的响应程度。蓝色div占用的水平空间可以在包装器上用
右边填充来补偿

但是没有人真的想要额外的DOM元素来实现适当的布局，是吗

另一个选项是在绿色div上设置
position:relative
，并将蓝色div作为绿色div的子级放置在DOM中。然后定位蓝色div，以便：

position: absolute;
left: 100%;
top: -x; /* Whatever is the height of the top yellow div and margin between*/
bottom: x; /* Whatever is the height of the bottom yellow div and margin between */
width: x; /* Set explicitly for example */

这是可能的，因为黄色div的高度是固定的

进一步扩展，整个蓝色div可以通过绿色div上的
：：after
伪元素来完成（与第二个解决方案应用相同的CSS），但它的适用性取决于蓝色div的内容需要是什么。
这就是CSS的用途。我会为你添加标签…如果绿色有不同的高度，黄色就不可能有。如果我在下面，你喜欢的是蓝色的div根据从左边开始的三个div之和的高度调整大小，对吗？jcvegan，是的，没错。我认为它应该是jquery或JS，因为绿色div的高度是基于从数据库加载的动态内容。啊，@coma击败了我，成为第一个解决方案。我很高兴看到我不是这里唯一一个只使用CSS的人，谢谢。非常好！谢谢你的帮助，科玛！
jQuery(".blue").css("height", jQuery("#left").outerHeight());

position: absolute;
top: 0;
right: 0;
bottom: 0; 

position: absolute;
left: 100%;
top: -x; /* Whatever is the height of the top yellow div and margin between*/
bottom: x; /* Whatever is the height of the bottom yellow div and margin between */
width: x; /* Set explicitly for example */