CSS 2 div size auto same height

问题:

i have an question in CSS:

How i can do that:

When the green div has (auto) 500px height for the content the red got the same.

And when the red has (auto) 700px height for the content the green got the same.

Both have any content then i use auto height.

So how i can do the green has the same width as red and red too but whit different content whit "height: auto;"?

回答1:

I would just wrap both DIVS, inside another div, and have them bump up on the parent DIV, then resize the parent

Something like this.... then use CSS to format them

<div id=parent>
    <div id=child>
      Content....
    </div>
    <div id=child>
      Content....
    </div>
</div>

some other solutions could be listed here http://www.ejeliot.com/blog/61

回答2:

First, read this excellent article. Then, check out the fiddle:

http://jsfiddle.net/UnsungHero97/qUT3d/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​

回答3:

Ideally you'd set a min-height on both cells, or as the answer by @Taeeril correctly suggest use javascript to equal out the heights.

Here is a solution using table display types http://jsfiddle.net/SebAshton/Pj7gy/

回答4:

Better solution use both javascript and css.

http://codepen.io/micahgodbolt/pen/FgqLc