堆叠的div等于一个高度

Question

寻找一个解决方案，我可以根据三个div的总高度来改变div的高度（其中一个是基于内容的变量）。

Green Div将根据内容改变身高。黄色的div没有。我希望蓝色div的高度根据三个左div的总高度而改变。我试图让所有div的顶部和底部匹配。

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

感谢您的帮助。

Answer 1

播放缩小textarea的大小：

http://jsfiddle.net/coma/dxpB2/

div.box {
    position: relative;
    padding: 0 110px 0 0;
}

div.fixed {
    height: 50px;
    background-color: #FFF601;
}

div.variable {
    margin: 10px 0;
    background-color: #00FF0D;
}

div.lateral {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    background-color: #9699FF;
}

Answer 2

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

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

或者您可以下载实际文件并正确引用它。

现在你说绿色div将根据内容进行调整。在div中设置内容后，您应该设置蓝色divs height。

$("#blue").height($("#yellow1").height() + $("#green").height() + $("#yellow2").height());

Answer 3

我为这个问题创建了一个JS小提琴：http://jsfiddle.net/GgPJq/

每次点击绿色文字时，它都会加倍。

这可以让你到达你需要的地方

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

基本上每次绿色展开上面的行都会改变风格以匹配。

Answer 4

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

第一个解决方案需要将所有四个div包装在一个设置了position: relative的容器元素中。

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

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

蓝色div的宽度可以明确设置，也可以left设置，具体取决于布局需要的响应速度。并且可以使用padding-right在包装器上补偿蓝色div占用的水平空间。

但没有人真的想要额外的DOM元素来实现正确的布局，不管怎样。

另一种选择是在绿色div上设置position: relative并将蓝色div作为DOM中绿色div的子项。然后定位蓝色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需要。