Html 自动拉伸垂直柱（divs）

请核对：

我想要以下内容：红色列有一些文本，黄色是动态内容，绿色没有任何内容，只是一种颜色。我希望红色和绿色列的高度与黄色内容的高度相同<代码>高度：100%不起作用

这不是一个简单的解决方案，但它很有效：

HTML

---

从

获取，请尝试使用列表代替。
您可以将其显示为表格行，将列表项显示为表格单元格，这使得所有列表项具有相同的高度

jsFiddle：

代码：

11
11
11
11

22342
dsfsdf
sdfs-df
v sdfsdf-s-dffffffffff
11

您可以使用负边距来获得结果

浮动div应包装在溢出：隐藏的容器中 这是 这是密码

#container {
    overflow:hidden;
}

#container div {
    padding-bottom:2000px;
    margin-bottom:-2000px;
}

您可以使用Jquery

html:

---

您可以使用表格（但实际上，表格是一种不好的做法）没有表格对不起，我以前是这样做的，这取决于所需的浏览器支持，您可以使用（IE9或更早版本不支持）。不要出于样式目的使用列表。列表应包含有序/无序信息列表或定义。改用div元素：@chaenu你完全正确！不过，我想传达的主要内容是

显示：表行

方法不错，兼容所有浏览器，包括ie7+@Stano。很高兴你喜欢。IE7在使用负边距时会出现一些问题，但在这些情况下不会出现。据我所知，如果您假装看到（溢出：可见）以负边距获得的部分，则会出现i7的问题。在这种情况下，您应该使用相对定位的容器进行黑客攻击。+1这在所有版本的IE（甚至IE6）中都存在。在这个问题中，有两列的宽度似乎是可变的。这种方法不支持可变宽度列。您应该仍然可以调整它，但您是对的。如果需要可变宽度，则不是最佳方法。如果需要一行代码：

$（'.col'）.height（Math.max.apply（Math，$（.col”）.map（function（）{return$（this.height（）；}））
#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;
}

<ul style="list-style:none;padding:0;display:table-row">
    <li style="display:table-cell;background-color: red;">11<br>11<br>11<br></li>
    <li style="display:table-cell;background-color: yellow;">22342<br>dsfsdf<br>sdfs df<br>v sdfsdf s dffffffffffffffff</li>
    <li style="display:table-cell;background-color: green; width: 40px;">11</li>
</ul>  

#container {
    overflow:hidden;
}

#container div {
    padding-bottom:2000px;
    margin-bottom:-2000px;
}

<div class="col" id="col1" style="background-color: red; float: left">11<br>11<br>11<br></div>
<div class="col" id="col2" style="background-color: yellow; float: left">22342<br>dsfsdf<br>sdfs df<br>v sdfsdf s dffffffffffffffff</div>
<div class="col" id="col3" style="background-color: green; width: 40px; float: right">11</div>

$(document).ready( function() {
maxcol = Math.max($('#col1').height(),$('#col2').height(),$('#col3').height());
$('.col').height(maxcol);    
});