我的 HTML 代码只是将页面分成两列，分别为 65% 和 35%。
<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
<div id="response">
</div>
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
<div id="note">
</div>
</div>
在responsediv中，我有可变数据；在notediv，我有固定数据。
即使两个divs 有两组不同的数据，我需要它们以相同的高度显示，以便背景颜色看起来填充包含两者的框。当然，问题出在responsediv，因为它的高度取决于当前显示在其中的数据量。
如何确保两列的高度始终相等？
【问题讨论】：
Flex 默认会这样做。
<div id="flex">
<div id="response">
</div>
<div id="note">
</div>
</div>
CSS：
#flex{display:flex}
#response{width:65%}
#note{width:35%}
https://jsfiddle.net/784pnojq/1/
奖励：多行
【讨论】：
这个问题的正确解决方法是使用display: table-cell
重要提示：此解决方案不需要float，因为table-cell 已经将div 转换为与同一容器中的其他元素对齐的元素。这也意味着您不必担心清除浮动、溢出、背景闪烁以及float hack 带来的所有其他令人讨厌的惊喜。
CSS：
.container {
display: table;
}
.column {
display: table-cell;
width: 100px;
}
HTML：
<div class="container">
<div class="column">Column 1.</div>
<div class="column">Column 2 is a bit longer.</div>
<div class="column">Column 3 is longer with lots of text in it.</div>
</div>
相关：
【讨论】：
如果您试图强制浮动 div 匹配另一个以创建列效果，这就是我所做的。我喜欢它，因为它简单干净。
<div style="background-color: #CCC; width:300px; overflow:hidden; ">
<!-- Padding-Bottom is equal to 100% of the container's size, Margin-bottom hides everything beyond
the container equal to the container size. This allows the column to grow with the largest
column. -->
<div style="float: left;width: 100px; background:yellow; padding-bottom:100%; margin-bottom:-100%;">column a</div>
<div style="float: left;width: 100px; background:#09F;">column b<br />Line 2<br />Line 3<br />Line 4<br />Line 5</div>
<div style="float:left; width:100px; background: yellow; padding-bottom:100%; margin-bottom:-100%;">Column C</div>
<div style="clear: both;"></div>
</div>
我认为这是有道理的。即使是动态内容，它似乎也能很好地工作。
【讨论】：
当您在 30 秒内编写一个包含两列的表格并解决问题时，我不明白为什么这个问题会被搁置一旁。
这个 div 列高问题出现在一个典型的布局中。当一个普通的旧基本 HTML 标记可以做到这一点时，为什么还要求助于脚本呢？除非布局上有大量的表格，否则我不相信表格明显慢的说法。
【讨论】：
也遇到过同样的问题，需要三个相邻的具有不同内容的 div，用右边框将它们“分开”，唯一有效的解决方案是另一个 jQuery 选项的略微修改版本回答。请记住，您还需要找到 here 的脚本。
下面是我稍微修改过的脚本版本，它只允许设置真正的最小高度（因为我需要我的盒子至少有一定的高度）。
/*--------------------------------------------------------------------
* JQuery Plugin: "EqualHeights"
* by: Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
*
* Copyright (c) 2008 Filament Group
* Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
*
* Description: Compares the heights or widths of the top-level children of a provided element
and sets their min-height to the tallest height (or width to widest width). Sets in em units
by default if pxToEm() method is available.
* Dependencies: jQuery library, pxToEm method (article:
http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
* Usage Example: $(element).equalHeights();
Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
Optional: to specify an actual min-height (in px), pass an integer value, regardless of previous parameter: $(element).equalHeights(false,150);
* Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/
$.fn.equalHeights = function(px,minheightval) {
$(this).each(function(){
if (minheightval != undefined) {
var currentTallest = minheightval;
}
else {
var currentTallest = 0;
}
$(this).children().each(function(i){
if ($(this).height() > currentTallest) {
currentTallest = $(this).height();
}
});
if (!px || !Number.prototype.pxToEm)
currentTallest = currentTallest.pxToEm(); //Use ems unless px is specified.
// For Internet Explorer 6, set height since min-height isn't supported.
if ($.browser.msie && $.browser.version == 6.0) {
$(this).children().css({'height': currentTallest});
}
$(this).children().css({'min-height': currentTallest});
});
return this;
};
它就像一个魅力，不会减慢任何速度:)
【讨论】：
将它们包装在一个包含背景颜色的 div 中，并在“列”之后有一个清除 div。
<div style="background-color: yellow;">
<div style="float: left;width: 65%;">column a</div>
<div style="float: right;width: 35%;">column b</div>
<div style="clear: both;"></div>
</div>
更新以解决一些 cmets 和我自己的想法：
这种方法之所以有效，是因为它本质上是对您的问题的简化，在这个有点“oldskool”的方法中，我将两列放在后面跟着一个空的清除元素，清除元素的工作是告诉父级（有背景）这是浮动行为结束的地方，这允许父级在 clear 位置基本上渲染 0 像素的高度，这将是任何最高的先前浮动元素。
这样做的原因是为了确保父元素与最高的列一样高，然后在父元素上设置背景以使两列具有相同的高度。
应该注意的是，这种技术是“oldskool”，因为更好的选择是使用 clearfix 之类的东西来触发这种高度计算行为，或者只是在父元素上设置 overflow: hidden。
虽然这在这种有限的场景中有效，但如果您希望每列看起来不同，或者它们之间有间隙，那么在父元素上设置背景将不起作用，但是有一个技巧可以做到这一点效果。
诀窍是为所有列添加底部填充，达到您期望的最大大小，这可能是最短和最高列之间的差异，如果您无法解决这个问题，请选择一个大数字，然后需要添加相同数字的负下边距。
您需要在父对象上隐藏溢出，但结果将是每列将请求呈现由边距建议的额外高度，但实际上并未请求该尺寸的布局（因为负边距会抵消计算）。
这将以最高列的大小呈现父级，同时允许所有列以它们的高度 + 使用的底部填充的大小呈现，如果此高度大于父级，则其余列将简单地剪掉。
<div style="overflow: hidden;">
<div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
<div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>
您可以在bowers and wilkins website 上查看此技术的示例（请参阅页面底部的四个水平聚光灯图像）。
【讨论】：
此代码将使您拥有可变数量的行（每行上具有可变数量的 DIV），并且它将使每行上的所有 DIV 与其最高邻居的高度匹配：
如果我们假设所有浮动的 DIV 都位于具有 id "divContainer" 的容器内，那么您可以使用以下内容：
$(document).ready(function() {
var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();
$('div#divContainer div').each(function(index) {
if(currentRowStart != $(this).position().top) {
// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = $(this).position().top;
currentTallest = $(this).height();
rowDivs.push($(this));
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($(this));
currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);
}
// do the last row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);
});
});
【讨论】：
您也可以随时使用背景图片来执行此操作。我倾向于 100% 地投票支持这个选项，因为唯一的完美解决方案是 Jquery 选项。
与使用带有背景颜色的外部 div 一样，您最终必须让两个 div 中的内容达到相同的高度。
【讨论】：
Here is a jQuery plugin 设置多个div的高度相同。下面是插件的实际代码。
$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
$(this).children().css({'min-height': currentTallest});
});
return this;
};
【讨论】：
if (!px && Number.prototype.pxToEm) 修复它以防您遇到与我相同的问题。
您应该将它们包装在一个没有浮动的 div 中。
<div style="float:none;background:#FDD017;" class="clearfix">
<div id="response" style="float:left; width:65%;">Response with two lines</div>
<div id="note" style="float:left; width:35%;">single line note</div>
</div>
我也在这里使用了 clearfix 补丁 http://www.webtoolkit.info/css-clearfix.html
【讨论】：
我建议您将它们都包装在具有所需背景颜色的外部 div 中。
【讨论】：