CSS 2 div 大小自适应相同高度

Question

我在CSS方面有一个问题：

我该如何做到这一点：

当绿色div的内容高度为（自动）500px时，红色div也有同样的高度。

当红色div的内容高度为（自动）700px时，绿色div也有同样的高度。

两者都有任何内容，然后我使用自动高度。

那么，我该如何使绿色和红色具有相同的宽度，但是内容不同，使用“height：auto;”？

- Marcos

---

这是Matthew James Taylor的一篇文章，他在其中解释了这个问题并提供了一个答案。我已经在我的几个项目中使用了他的解决方案，它非常有效。没有JavaScript，没有黑客技巧，纯HTML和CSS。http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks - Jakub Hromadík

Answer 1

首先，阅读这篇优秀的文章。然后，查看下面的示例：

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

- Hristo

Answer 2

我建议您将两个 DIV 元素放在另一个 div 元素中，并使它们对父 DIV 进行调整，然后调整父元素的大小。类似这样的代码... 然后使用 CSS 格式化它们。

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

这里列出了一些其他的解决方案 http://www.ejeliot.com/blog/61

- Brad Fox

---

这个对我有效，我使用了图片的方法。谢谢你。 - Marcos

Answer 3

理想情况下，您最好在两个单元格上都设置一个min-height，或者像@Taeeril所建议的那样使用javascript来使它们的高度相等。

这里有一个使用表格显示类型的解决方案 http://jsfiddle.net/SebAshton/Pj7gy/

- Seb Ashton

Answer 4

Better solution use both javascript and css.

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

- user2657778