Как я могу заставить плавающий 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>

---

Обновлено с учетом некоторых комментариев и моих собственных мыслей:

Этот метод работает, потому что он по существу упрощает вашу проблему, в этом несколько старомодном методе я помещаю два столбца, за которыми следует пустой очищающий элемент, задача очищающего элемента - сообщить родителю (с фоном) это то, где поведение с плавающей точкой заканчивается, это позволяет родителю, по сути, визуализировать 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>

Пример этой техники можно увидеть на веб-сайте Bowers and 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

Answer 6

Я не могу понять, почему эта проблема врезается в землю, когда через 30 секунд вы можете закодировать таблицу из двух столбцов и решить проблему.

Эта проблема высоты столбца div встречается по всей типичной схеме. Зачем прибегать к написанию сценариев, когда обычный старый HTML-тэг будет делать это? Если в макете нет огромных и многочисленных таблиц, я не согласен с аргументом, что таблицы значительно медленнее.

Answer 7

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/

Answer 8

Этот код позволит вам иметь переменное количество строк (с переменным количеством 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);

});
});

Answer 9

Имея такую ​​же проблему, требующую три элемента 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;
};

Работает как шарм и ничего не тормозит:)

Answer 10

Вы всегда можете использовать фоновое изображение, чтобы сделать это тоже. Я склонен голосовать за этот вариант 100% времени, так как единственное другое идеальное решение - это вариант Jquery.

Как и при использовании внешнего элемента div с цветом фона, в конечном итоге содержимое обоих элементов будет иметь одинаковую высоту.