javascript - div 的大小取决于另一个 div 的大小

Question

我有一个包含 2 个其他 div 的 div。它们垂直对齐。现在，较低的 div 正在通过 javascript 更改其大小。我现在想要的是上面的 div 正在根据其他 div 的大小改变它的大小。有没有办法只使用 css 样式而不使用 js？

更新:外部 div 具有固定大小。

<div>
 <div> childdiv 1</div>
 <div> childdiv 2</div>
</div>

更新:好吧，我没有说清楚，下面的盒子正在改变它在顶部方向的高度。然后上部的 div 应该降低它的高度。

Answer 1

您可以使用 display:table 和 display:table-row 相应地更改上部 div 的高度，以便总高度与固定高度匹配容器:

#outer{
   display:table;
   height:200px;
   width:200px;
}

#inner1{
    background-color:red;
    display:table-row;
}

#inner2{
    background-color:green;
    display:table-row;
    height:30px;
}

你会在这里找到一个例子:http://jsfiddle.net/bRg6m/

这是你想要的吗？

添加:请注意，这在 IE7 或更早版本中不起作用。如果您想支持这些浏览器，则必须使用 Javascript 解决方案。