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

https://stackoverflow.com/questions/526294

22-08-2019
|

题

我的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, ，我有固定的数据。即使这两个 divS有两组不同的数据，我需要它们以相同的高度显示，以使背景颜色似乎填充了包含两者的盒子。自然，问题是 response div, ，由于其高度取决于当前显示的数据量。

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

解决方案

将它们包裹在包含在其上的背景颜色的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”方法中，我将两个列放入了一个空的清理元素，清除元素的作业是告诉父母（带有背景），这就是浮动行为结束了，这使父允许在透明位置渲染0个高度的像素，这将是最高的浮动元素。

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

应该注意的是，这项技术是“ Oldskool”，因为更好的选择是触发这种高度计算行为 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>

您可以在鲍尔斯和威尔金斯网站（请参阅页面底部的四个水平聚光灯图像）。

其他提示

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

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

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

解决此问题的正确解决方案是使用 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="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

我不明白为什么在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/

奖金：多行

https://jsfiddle.net/784pnojq/2/

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

您始终可以使用背景图像来执行此操作。我倾向于100％的时间投票赞成此选项，因为唯一的其他完美解决方案是JQuery选项。

与使用具有背景颜色的外部div一样，您最终必须将两个DIV中的内容达到相同的高度。

此代码将使您拥有可变数量的行（每行的DIV数量变量），并且它将使每行的所有DIVS都与其最高邻居的高度相匹配：

如果我们假设所有的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);

});
});

也遇到了相同的问题，需要三个divs彼此相邻，并带有不同的内容来“分开”它们，唯一起作用的解决方案是另一个答案中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;
};

它像魅力一样工作，没有放慢脚步:)

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow