我如何强制浮动DIV与另一个浮动DIV的高度相匹配？

Question

我的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,其高度根据当前在其中显示的数据量而变化.

我怎样才能确保两列的高度始终相等？

Answer 1

将它们包含在应用了背景颜色的包含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>

更新以解决一些评论和我自己的想法:

这种方法有效,因为它本质上是你的问题的简化,在这个有点'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和wilkins网站上看到这种技术的一个例子(参见页面底部的四个水平聚光灯图像).

Answer 2

如果您试图强制浮动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>

我认为这是有道理的.即使使用动态内容,它似乎也能很好地工作.

Answer 3

这是一个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;
};

Answer 4

这个问题的正确解决方案是使用 display: table-cell

重要提示:此解决方案不需要,float因为table-cell已经将其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"

Answer 5

你应该将它们包装在没有浮动的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