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

68

我的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，因为其高度取决于当前显示在其中的数据量。

如何确保两列的高度始终相等？

html  css  height 
— 文卡察拉姆
source

Answers:

100

将其包裹在包含背景色的包含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>

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

该方法之所以有效，是因为它本质上是简化了您的问题，在这种有点“过时”的方法中，我将两列放在其后，然后是一个空的clearing元素，clearing元素的工作是告诉父级（有背景）这是哪里浮动行为结束后，这将允许父对象在透明位置实际渲染高度为0的像素，这将是先前最高浮动元素的大小。

原因是要确保父元素与最高的列一样高，然后在父元素上设置背景，以使两列具有相同的高度。

应该注意的是，这种技术是“老套”，因为更好的选择是使用诸如clearfix之类的方法来触发这种高度计算行为。或通过简单地通过在父元素上隐藏溢出。

尽管这在有限的情况下有效，但是如果您希望每列在外观上看起来有所不同，或在它们之间留有空隙，那么在父元素上设置背景将不起作用，但是有一种技巧可以达到这种效果。

诀窍是在所有列中添加底部填充，以达到您期望的最大大小，这可能是最短列和最高列之间的差。如果无法解决此问题，则选择一个大数字，然后需要添加相同数字的负底边距。

您将需要隐藏在父对象上的溢出，但结果将是每一列都将请求渲染由边距建议的此额外高度，但实际上并不需要此大小的布局（因为负边距会抵消计算）。

这将以最高的列的大小渲染父对象，同时允许所有列以其高度+使用的底部填充的大小渲染，如果此高度大于父对象，则其余部分将被剪掉。

<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网站上看到此技术的示例（请参阅页面底部的四个水平聚光灯图像）。

— 平均值
source
3
如果两列的背景颜色不同，将无济于事。
— 09年
13
他的例子没有这个要求，尽管感谢:)。
— Meandmycode
我知道这确实很老，但还是+1。您能解释一下为什么行得通吗？
— 帕里斯·瓦尼
对我来说非常适合在一个我正在忙的项目上工作。谢谢。+1
— 乔治·怀特
您会建议使用边距填充hack还是将内容放入同一行的td标签中？
— grisevg 2011年
38

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

我认为这很有道理。即使使用动态内容，它似乎也可以很好地工作。

— 戴森
source
yea..100％的声音远远好非常高的固定number..thanks此
— 尖齿
3
唯一的问题是，我希望每列周围都有边框，这将隐藏底部边框。:(
— 亚历山大·伯德
+1是一种有趣的技术。经过一些实验后，我注意到填充的百分比值实际上是基于元素的宽度，因此，高于100％（对于纵向视图）可能是个好主意。参见mdn。
— stianlik
关于此技术的真正伟大方面之一是它似乎与Foundation等CSS框架高度兼容。而且，它不会影响在移动视图中将矩阵压缩为单个列的矩阵。总而言之，我认为这是第一解决方案。
— 克里斯·马里西克
一件事...代替<div style =“ clear：both;”> </ div>，您可以在父项中添加：after。这消除了毫无意义的标记
— Katherine C
15

这是一个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;
};
— 贾斯汀·约斯特（Justin Yost）
source
2
根据设计，像这样使用javascript可能是唯一的选择。
— Johan Kronberg 2010年
1
纯CSS解决方案很少工作，因为它们仅用于简单的设计。我通常使用这样的脚本。但是在处理AJAX时应该小心。
— 东和尚
+1和@JohanKronberg +1我刚刚遇到了其中一次，谢谢。
— 路易斯
1
if (!px && Number.prototype.pxToEm)修复它，以防您遇到与我相同的问题。
— 路易
4
@ akshar-prabhu-desai AJAX？！？，请指出此答案中异步JavaScript在哪里。
— gok
10

解决此问题的正确方法是使用 display: table-cell

重要提示：不需要此解决方案，float因为table-cell已经将div变成了与同一容器中其他元素对齐的元素。这也意味着您不必担心会清除浮标，溢出，背景照耀以及所有其他令人讨厌的意外情况，floathack带来的。

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>

有关：

— 亚伦·迪古拉（Aaron Digulla）
source
6

您应该将它们包装在没有浮点数的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补丁

— 本迪威
source
2
如果两列的背景颜色不同，将无济于事。除非您知道其中一列总是比另一列长：将最短的列的backgorund颜色赋予“包装器”，并让最长的列具有其自己的背景来“伪造”两个同样长的列。
— 09年
@Arve Systad同意，看来这不是OP所寻找的。
— bentewey
如果我要为每个div使用两种不同的颜色怎么办？
— 修复了
4

我不明白为什么在30秒内可以编写一个两列表并解决该问题后，这个问题为什么会陷入现实。

这个div列高度问题在整个典型布局中都会出现。当普通的基本HTML标记可以执行脚本时，为什么要使用脚本？除非布局上有很多表格，否则我不会否认表格的速度要慢得多的说法。

— 埃里希·里希特
source
大多数客户都知道“基于div的布局”很热门，他们告诉我们不要使用表格。遇到了许多想要在所有设计布局中使用0张桌子的客户。
— 东和尚
10
表是用于表的。CSS用于布局。op问题很简单，但是解决方案应该可以扩展到任何复杂性。如果我有16列布局，该怎么办？我可以使用16列的表格，但是当我要更改网站样式时该怎么办？我有一个混乱的地狱代码。
— Marek Maurizio
0

我建议您将它们都包装在具有所需背景色的外部div中。

— 混沌
source
0

您也可以始终使用背景图像来完成此操作。我倾向于100％地投票给该选项，因为唯一的其他完美解决方案是Jquery选项。

与将外部div与背景颜色一起使用一样，您最终将不得不使两个div中的内容达到相同的高度。

— 德鲁
source
0

此代码将使您具有可变数量的行（每行上具有可变数量的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);

});
});
— 不太明显
source
0

遇到同样的问题时，需要三个div并排，每个div具有不同的内容，并使用右边界将它们“分隔”，唯一有效的解决方案是在另一个答案中略微修改了jQuery选项的版本。记住，您还需要此处找到的脚本。

以下是我对该脚本进行的略微修改的版本，该脚本仅允许进行最小高度设置（因为我需要使框至少具有一定的高度）。

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

它就像一种魅力，不会减慢任何速度:)

— 大卫
source
读者要非常警惕此脚本，如果包含此插件，则其许可为GPL v2。在您的应用程序中嵌入GPL v2 javascript通常被接受，这意味着您必须开源整个网站。
— 克里斯·马里西克
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.