HTML/CSS: создание двух плавающих divs одинаковой высоты

У меня есть небольшая странная проблема, которую я сейчас решаю с помощью table, см. Ниже. По сути, я хочу, чтобы два элемента div занимали 100% доступной ширины, но занимали столько вертикального пространства, сколько необходимо (что на самом деле не так очевидно из рисунка). Оба должны всегда иметь одинаковую высоту с небольшой линией между ними, как показано на рисунке.

alt text
(источник: pici.se)

Это все очень легко сделать с помощью table, которую я сейчас делаю. Тем не менее, я не слишком заинтересован в решении, так как семантически это на самом деле не таблица.

ОТВЕТЫ

Ответ 1

Вы можете получить столбцы с одинаковой высотой в CSS, применяя нижнее заполнение большого количества, нижний отрицательный запас той же суммы и окружающие столбцы с div, который имеет переполнение скрыто. Вертикальное центрирование текста немного сложнее, но это должно помочь вам в пути.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

Ответ 2

Это год 2012 + n, поэтому, если вы больше не заботитесь о IE6/7, display:table, display:table-row и display:table-cell работают во всех современных браузерах:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Обновление 2016-06-17: Если вы считаете, что пришло время для display:flex, посмотрите Flexbox Froggy.

Ответ 3

Для достижения этой цели вы должны использовать flexbox. Он не поддерживается в IE8 и IE9 и только с префиксом -ms в IE10, но все остальные браузеры поддерживают его. Для префиксов поставщиков вы также должны использовать autoprefixer.

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}

Ответ 4

вы можете заставить это работать с js:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>

Ответ 5

Это классическая проблема в CSS. На самом деле это не решение.

Эта статья из A List Apart является хорошим прочтением этой проблемы. Он использует технику под названием "искусственные столбцы", основанную на том, что на элементе, содержащем столбцы, который создает иллюзию столбцов равной длины, имеет одно вертикальное фоновое изображение. Поскольку он находится в оболочке с плавающими элементами, он доходит до самого длинного элемента.

Редакторы A List Apart имеют эту заметку в статье:

Замечание редакторов: Несмотря на то, что эта статья отлично подходит для своего времени, эта статья может не соответствовать современным передовым практикам.

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

Ответ 6

У меня была аналогичная проблема, и, на мой взгляд, лучшим вариантом является использование всего лишь немного javascript или jquery.

Вы можете получить требуемые divs одинаковой высоты, получив максимальное значение div и применив это значение ко всем другим div. Если у вас много div и много решений, я предлагаю написать небольшой код js для определения того, какой из всех divs является самым высоким, а затем использовать его.

С jquery и 2 divs это очень просто, вот пример кода:

$('.smaller-div').css('height',$('.higher-div').css('height'));

И для конца есть 1 последняя вещь. Их отступы (сверху и снизу) должны быть одинаковыми! Если у вас есть более крупная прокладка, вам нужно устранить разницу в заполнении.

Ответ 7

Это работает для меня в IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).

Также работает в IE 6, если вы раскомментируете clearer div внизу. Изменить: как сказала Натали Даун, вы можете просто добавить width: 100%; в #container.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

Я не знаю CSS-способ вертикального центрирования текста в правом div, если div не имеет фиксированной высоты. Если это так, вы можете установить line-height на то же значение, что и высота div, и поместить внутренний div, содержащий ваш текст, с помощью display: inline; line-height: 110%.

Ответ 8

Насколько я знаю, вы не можете сделать это, используя текущие реализации CSS. Чтобы создать два столбца с одинаковой высотой, вам понадобится JS.

Ответ 9

Используя Javascript, вы можете сделать два тега div одинаковой высоты. Маленький div будет настраиваться на ту же высоту, что и самый высокий тег div, используя код, показанный ниже:

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

С "left" и "right" является id тегов div.

Ответ 10

Используя свойство css → display: table-cell

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

Ответ 11

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

Ответ 12

Используя JS, используйте data-same-height="group_name" для всех элементов, которые вы хотите иметь одинаковую высоту.

Пример: https://jsfiddle.net/eoom2b82/

Код:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});

Ответ 13

Мне нужно было сделать нечто подобное, вот моя реализация. Напомним, что цель состоит в том, чтобы 2 элемента занимали ширину заданного родительского контейнера, а высота должна быть настолько высокой, насколько это необходимо. По сути, высота равна максимальной высоте наибольшего количества содержимого, но другой контейнер находится на одном уровне.

HTML

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

CSS

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}

Ответ 14

Несколько лет назад свойство float использовалось для решения этой проблемы с помощью table подхода с использованием display: table; и display: table-row; и display: table-cell; ,

Но теперь со свойством flex вы можете решить его с помощью 3 строк кода: display: flex; и flex-wrap: wrap; и flex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50% - это значения flex мы дали: flex-grow flex-shrink flex-basis соответственно. Это относительно новый ярлык во flexbox, чтобы не вводить их по отдельности. Я надеюсь, что это помогает кому-то там