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

我得到了一个包含2个其他div的div。它们垂直对齐。现在，较低的div通过javascript改变其大小。我现在想要的是，上面的div是根据其他div的大小来改变它的大小。有没有办法做到这一点与CSS风格只，而不使用js？div的大小取决于另一个div的大小

更新：外部div有一个固定的大小。

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

更新：好吧，我没有把这个清楚得足够清楚，下方的盒子正在改变其顶部方向的高度。然后上面的div应该减少它的高度。

来源

2012-01-12 Pathos

你能添加你的HTML/CSS吗？ [测试用例]（http://jsfiddle.net/）也是有用的。 – thirtydot 2012-01-12 09:47:19

你可以给我们看一些代码吗？ – ssdesign 2012-01-12 09:47:58

嗯，我简化了我的问题来问这个问题。实际上它们全部分为单独的课程。所以这里很难发布。但是这个问题没有普遍的答案吗？ – Pathos 2012-01-12 09:50:29

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

#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解决方案。

来源

2012-01-12 10:23:28 Simon

这看起来很有希望，今天晚上我会试试。 – Pathos 2012-01-12 10:36:37

我不知道我理解你的问题。我在这里举了一个例子，上面的div根据下面的div尺寸改变它的宽度。那是你需要的吗？

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

来源

2012-01-12 09:53:43 Filip

在你的例子中，box1应该减小其大小box2增加其大小。 – Pathos 2012-01-12 09:59:36

当你谈论大小时，你是在谈论高度和宽度？ – Filip 2012-01-12 10:02:29

关于身高，不好意思，我也更新了我最初的问题。 – Pathos 2012-01-12 10:03:00

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

将第一个DIV的宽度设置为100%应该使其调整宽度以匹配第二个DIV（因为调整大小将强制父DIV的宽度也增加），但尝试尝试时会出现问题为了获得高度匹配，与纯CSS一样，第一个DIV将没有参考重新计算自己的高度以匹配。

Example Here

或者，而不是使第二DIV调整，你可以调整父DIV，并有两个孩子用CSS设置如下：

width:100%; 
height:50%;

来源

2012-01-12 09:54:23 musefan

可能这就是我的意思：

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

来源

2012-01-12 10:00:26 ssdesign

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

回答

相关问题