Question

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

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

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

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

Answer 1

我不确定我理解你的问题。我在这里做了一个例子，其中上部div根据较低的divs大小改变其宽度。这就是你需要的吗？

http://jsfiddle.net/8fwXR/

HTML

<div id="wrapper">
    <div id="box1"></div>
    <div id="box2"></div>
</div>

CSS

#wrapper {
    float: left;
}

#box1 {
    background: red;
    height: 100px;
    width: 100%;
}

#box2 {
    background: green;
    height: 100px;
    width: 400px;
}

Answer 2

您可以使用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解决方案。

Answer 3

真的取决于你的设置。到目前为止最简单的方法是将javascript代码同时应用于两个DIV。

将第一个DIV的宽度设置为100%会导致它调整宽度以匹配第二个DIV（因为调整大小会强制父DIV的宽度增加），但是你会有一个尝试获得高度匹配时的问题，与纯CSS一样，第一个DIV没有引用重新计算自己的高度来匹配。

Example Here

或者，不是调整第二个DIV大小，而是调整父DIV的大小，并使用CSS设置两个子代，如下所示：

width:100%;
height:50%;

Answer 4

这可能就是我的意思：

document.getElementById("upperDiv").style.width = document.getElementById("bottomDiv").style.width

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

4 个答案: