我如何强制浮动DIV匹配另一个浮动DIV的高度？
我的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> 在response div ，我有可变数据; 在note div ，我有固定的数据。 即使两个div有两组不同的数据，我需要它们以相同的高度显示，以便背景颜色显示为填充包含两者的框。 自然，问题是response div ，因为它的高度根据当前显示的数据量而变化。
我怎样才能确保两列的高度总是相等的？
将它们包裹在一个包含div的背景颜色上，并在'columns'之后有一个清除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>
更新以解决一些意见和我自己的想法：
这个方法是可行的，因为它本质上是对你的问题的一个简化，在这个有点'oldskool'的方法中，我把两列放在一个空清除元素之后，清除元素的作用是告诉父（带背景）浮动行为结束，这允许父母实质上在清除的位置呈现0像素的高度，这将是先前浮动元素的最高值。
原因是为了确保父元素与最高列一样高，然后在父级上设置背景以使两个列具有相同的高度。
应该指出的是，这种技术是'oldskool'，因为更好的select是触发这个高度计算行为像clearfix或只是有一个overflow：隐藏在父元素。
虽然这在这个有限的情况下工作，如果你希望每列看起来不同，或者有一个间隙，然后设置父元素的背景将无法正常工作，但有一个技巧来获得这种效果。
诀窍是将所有列的底部填充添加到最大数量的大小，您可能是最短和最高的列之间的差异，如果你不能这样做，然后select一个大数字，然后需要添加相同数量的负底部边距。
您将需要在父对象上隐藏溢出，但结果将是每个列将请求呈现由边距build议的这个额外的高度，但实际上并没有请求该大小的布局（因为负边界反对计算）。
这将使父级呈现最高列的大小，同时允许所有列在其高度+所使用的底部填充的大小上呈现，如果此高度大于父级，则其余部分将简单地裁剪掉。
<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和wilkins网站上看到这种技术的示例（请参阅页面底部的四个水平聚光灯图像）。
如果你试图强制一个浮动div来匹配另一个创build列效果，这就是我所做的。 我喜欢它，因为它简单而干净。
<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>
我认为这是有道理的。 即使使用dynamic内容，它似乎也能正常工作。
这里是一个jQuery插件来设置多个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; };
这个问题的正确解决scheme是使用display: table-cell
重要说明：这个解决scheme不需要float因为table-cell已经把div转换成了与其他容器中的其他元素div的元素。 这也意味着你不必担心清理漂浮物，溢出物，闪烁的背景以及float带给聚会的所有其他令人讨厌的惊喜。
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>
有关：
- 的jsfiddle
- 使用CSS“display：table-cell”作为列
你应该把它们包装在一个没有浮动的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>
我也在这里http://www.webtoolkit.info/css-clearfix.html使用clearfix补丁;
我不明白为什么这个问题在30秒内被打破，你可以编写一个双列表并解决问题。
这个div列高度问题出现在一个典型的布局。 为什么诉诸脚本当一个普通的旧的基本的HTML标签将做到这一点？ 除非布局上有大量的表格，否则我不会购买表格明显较慢的观点。
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/
奖金：多行
我build议你把它们都包在一个外部div与所需的背景颜色。
你总是可以使用背景图片来做到这一点。 我倾向于在100％的时间内为这个选项投票，因为唯一的另一个完美的解决scheme是Jquery选项。
就像使用带有背景颜色的外部div一样，您最终不得不使用两个div中的内容达到相同的高度。
这段代码会让你有一个可变数量的行（每行的可变数量的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); }); });
在遇到同样的问题的时候，需要三个不同内容的div，用右边框来“分离”它们，唯一的解决方法是在另一个答案中稍微修改一下jQuery选项。 记住你也需要在这里find的脚本。
下面是我稍微修改过的脚本版本，它只是允许一个真正的最小高度设置（因为我需要我的箱子至less有一定的高度）。
/*-------------------------------------------------------------------- * 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; };
它的作品像一个魅力，并没有减慢任何东西:)
