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应该减少它的高度。
您可以使用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解决方案。
这看起来很有希望,今天晚上我会试试。 – Pathos 2012-01-12 10:36:37
我不知道我理解你的问题。 我在这里举了一个例子,上面的div根据下面的div尺寸改变它的宽度。那是你需要的吗?
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;
}
真的取决于你的设置。到目前为止,最简单的方法就是将JavaScript代码同时应用于两个DIV。
将第一个DIV的宽度设置为100%
应该使其调整宽度以匹配第二个DIV(因为调整大小将强制父DIV的宽度也增加),但尝试尝试时会出现问题为了获得高度匹配,与纯CSS一样,第一个DIV将没有参考重新计算自己的高度以匹配。
或者,而不是使第二DIV调整,你可以调整父DIV,并有两个孩子用CSS设置如下:
width:100%;
height:50%;
可能这就是我的意思:
document.getElementById("upperDiv").style.width = document.getElementById("bottomDiv").style.width
你能添加你的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