html - 自动拉伸垂直列（div）

Question

请检查这个小提琴：

我想要以下内容：红色栏有一些文字，黄色是动态内容，绿色什么都没有，只是一种颜色。我希望红色和绿色列都与黄色内容一样高。height: 100%没用

Answer 1

您可以使用负边距来实现结果

浮动的 div 应该用溢出包装在一个容器中：隐藏 这是小提琴 这是代码

#container {
    overflow:hidden;
}

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

Answer 2

工作演示

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

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

从这里得到

Answer 3

你可以使用jQuery

http://jsfiddle.net/9XVSr/

html:

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

jQuery

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

Answer 4

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

jsFiddle：

http://jsfiddle.net/Q7MFX/4/

代码：

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