Question

I got a div which contains 2 other divs. They are vertically aligned. Now, the lower div is changing its size via javascript. What I want now is that the upper div is changing its size depending on the other divs size. Is there a way to do this with css style only, without using js?

UPDATE: The outer div has a fixed size.

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

UPDATE: Ok I dont使这一点足够清楚,下方正改变顶端的高度。然后,上半衰期应降低高浓度。

Answer 1

您可使用<代码>:表和<代码>:表-row,相应改变上层高度,使总高度与集装箱固定高度相吻合:

#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/“rel=“nofollow” http://jsfiddle.net/bRg6m/。

这是你们想要的吗?

添加:注意到这在7年或更长时间内没有工作。如果你想要支持这些浏览器,你就不得不使用 Java字解决方案。

Answer 2

I m not sure I understand your question. I made an example here where the upper div is changing its width depending on the lower divs size. Is that what you needed?

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 3

这显然是我所说的:

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

Answer 4

真正取决于您的设立。迄今为止最容易的方法是同时将 j印法适用于二IV。

规定第一个DIV的宽度为<>100%<>>><>>>> 代码,应使其重新计算宽度,使之与第二个DIV相匹配(因为重新计算将迫使CIV的母体增加湿度),但你在试图达到高度时会遇到问题,因为与CSS一样,第一个DIV将不提及重新计算其身高。

例:

Alternatively, instead of making the second DIV resize you could resize the parent DIV and have both children set with CSS as follows:

width:100%;
height:50%;

友情链接