CSS 2 div大小自动相同高度

Posted 2023-03-06

【中文标题】CSS 2 div大小自动相同高度

【英文标题】：CSS 2 div size auto same height

【发布时间】：2012-04-24 04:48:46

【问题描述】：

我有一个关于 CSS 的问题：

我该怎么做：

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

当红色的内容具有（自动）700px 高度时，绿色的高度相同。

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

那么我怎样才能使绿色也具有与红色和红色相同的宽度，但“高度：自动；”的内容却不同？

【问题讨论】：

这是 Matthew James Taylor 的一篇文章，他解释了这个问题并提供了答案。我在几个项目中使用了他的解决方案，效果很好。没有 javascript，没有 hack，纯 html 和 CSS。 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

【参考方案1】：

首先，阅读this excellent article。然后，看看小提琴：

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

【参考方案2】：

我只需将两个 DIVS 包装在另一个 div 中，然后让它们在父 DIV 上碰撞，然后调整父 DIV 的大小

像这样......然后使用 CSS 来格式化它们

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

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

【讨论】：

这个对我有用，我使用了图像的方法。谢谢你。

【参考方案3】：

理想情况下，你会在两个单元格上设置一个最小高度，或者@Taeeril 的回答正确地建议使用 javascript 来等于高度。

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

【参考方案4】：

Better solution use both javascript and css.

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