浮动 div 和灵活的高度答案

【问题标题】：Floating div and flexible height浮动 div 和灵活的高度
【发布时间】：2013-04-15 17:19:52
【问题描述】：

也许这个问题之前已经回答过了，但找不到真正有用的答案，所以这里是：

我有这个布局layout test，我需要橙色框与绿色框具有相同的高度，这将具有动态内容。

我尝试了不同的解决方案，但没有得到正确的结果。一种解决方案是让橙色和绿色的盒子有：

padding-bottom: 500em;
margin: -500em;

和父母overflow: hidden;

但问题始于红色框底部（浮动在紫色顶部）由于overflow: hidden;而被切断

有人有解决方案或想法吗？如果可能的话，我更喜欢纯 CSS。

适合我的解决方案：

【问题讨论】：

【解决方案1】：

抱歉，我找不到纯 CSS 的解决方案，但使用这个简单的 jquery，您可能会得到想要的结果：

jQuery(document).ready(function( $ ){   
var green = $('.col3').height();
var red = $('.col1').height();
    $('.col2').height(green - red + 15);
});

【讨论】：

最后的+15是因为红绿相差15px
好点，但在左右列上使用了显示表格，里面有表格单元格。最后一个 div 在左列，它作为底部，高度作为左列和右列之间的差异。工作并且是纯 CSS :) 我稍后会在我的电脑上发布一个示例:)

【解决方案2】：

用我自己的解决方案更新，有问题的链接。

【讨论】：