Как я могу заставить плавающий 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>
в responsedivУ меня есть переменные данные; в notedivЯ зафиксировал данные. Хотя два divУ меня есть два разных набора данных, мне нужно, чтобы они отображались с одинаковой высотой, чтобы цвета фона отображались в окне, содержащем оба. Естественно, проблема заключается в responsediv, поскольку его высота варьируется в зависимости от объема данных, отображаемых в настоящее время в нем.
Как я могу убедиться, что высота двух столбцов всегда равна?
11 ответов
Оберните их в содержащий 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 (см. Четыре горизонтальных прожектора в нижней части страницы).
Если вы пытаетесь заставить плавающий элемент 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 взломать приносит с собой на вечеринку.
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>
Я также использую патч для исправления здесь 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/
БОНУС: несколько рядов
Этот код позволит вам иметь переменное количество строк (с переменным числом DIV в каждой строке), и он сделает так, чтобы все DIV в каждой строке соответствовали высоте его самого высокого соседа:
Если мы предположили, что все DIV, которые находятся в плавающем состоянии, находятся внутри контейнера с идентификатором "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);
});
});
Вы всегда можете использовать фоновое изображение, чтобы сделать это тоже. Я склонен голосовать за этот вариант 100% времени, так как единственное другое идеальное решение - это вариант Jquery.
Как и при использовании внешнего элемента div с цветом фона, в конечном итоге содержимое обоих элементов будет иметь одинаковую высоту.
Я рекомендую вам обернуть их обоих во внешний 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;
};
Работает как шарм и ничего не тормозит:)