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

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

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

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

儿童组1
儿童组2

---

更新：好的，我没有说得足够清楚，下面的盒子在顶部方向改变它的高度。上面的div应该会降低它的高度。

我不确定我是否理解你的问题。 我在这里举了一个例子，上面的div根据下面的div大小改变它的宽度。这就是你需要的吗

HTML

---

我不确定我是否理解你的问题。 我在这里举了一个例子，上面的div根据下面的div大小改变它的宽度。这就是你需要的吗

HTML

---

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

将第一个DIV的宽度设置为

100%

应该会使其调整宽度以匹配第二个DIV（因为调整大小会迫使父DIV的宽度也增加），但在尝试获得匹配的高度时会出现问题，与纯CSS一样，第一个DIV将没有引用来重新计算其自身的高度以进行匹配

或者，不必调整第二个DIV的大小，您可以调整父DIV的大小，并使用CSS设置两个子DIV，如下所示：

width:100%;
height:50%;

---

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

将第一个DIV的宽度设置为

100%

应该会使其调整宽度以匹配第二个DIV（因为调整大小会迫使父DIV的宽度也增加），但在尝试获得匹配的高度时会出现问题，与纯CSS一样，第一个DIV将没有引用来重新计算其自身的高度以进行匹配

或者，不必调整第二个DIV的大小，您可以调整父DIV的大小，并使用CSS设置两个子DIV，如下所示：

width:100%;
height:50%;

---

可能这就是我的意思：

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

---

可能这就是我的意思：

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

---

您可以使用

display:table

和

display:table row

相应地更改上分区的高度，以便总高度与容器的固定高度匹配：

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

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

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

您可以在这里找到一个示例：

这是你想要的吗

---

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

您可以使用

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;
}

您可以在这里找到一个示例：

这是你想要的吗

---

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

您可以添加HTML/CSS吗？A也会很有用。你能给我们一些代码看看吗？我简化了我的问题来问这个问题。在现实中，它被划分为不同的类别。所以很难在这里发布。但是这个问题没有一般的答案吗？你可能想要一个手风琴菜单，其中两个div都填充容器，当一个的大小改变时，另一个应该调整其高度以再次填充容器？不可能说是否有一般的答案，因为你没有足够详细地描述你的问题。你能添加你的HTML/CSS吗？A也会很有用。你能给我们一些代码看看吗？我简化了我的问题来问这个问题。在现实中，它被划分为不同的类别。所以很难在这里发布。但是这个问题没有一般的答案吗？你可能想要一个手风琴菜单，其中两个div都填充容器，当一个的大小改变时，另一个应该调整其高度以再次填充容器？不可能说是否有一般的答案，因为您没有足够详细地描述您的问题。在您的示例中，box1的大小应该减少box2增加的大小。当您谈论大小时，您是在谈论高度和宽度吗？在您的示例中，box1的大小应该减少box2增加的大小。当您谈论大小时，你说的是高度和宽度吗？这个看起来很有希望，我今晚会试试。这个看起来很有希望，我今晚会试试。