«Див» блоки одинаковой высоты

в 16:40, , рубрики: css, html

На днях столкнулся с задачей:

Сделать две одинаковые по высоте <div>-колонки, не зависимо от количества текста в какой либо из них.

Условия:

  1. Никаких таблиц;
  2. Поддержка IE6+ и т.д;
  3. Резиновая верстка;
  4. Никакого JavaScript, чистый HTML и CSS.

Дизайн:

В дизайне изображены две колонки с отступом друг от друга. Каждый из них имеет свой фон и border с округленными уголками. На вид все просто.

Поиск решений:

Искал и естественно нашел очень полезный пост, где описаны все самые действенные способы решения данной задачи: http://habrahabr.ru/post/64173/.
Собственно 4-е решение из этого поста было наиболее приемлемым, но с помощью него мне так и не удалось вывести два разных фона для своих колонок.

Решение


В отчаянии найти решение в интернете, я решил взять за основу структуру 4-го решения из вышеописанного поста и переделать/упростить под свои нужды.

Вышла та же структура но уже не на основе позиционирования (position:relative), а на основе отрицательных отступов (margin-left:-100%;) и более логичной структуры (сначала левая колонка/текст, потом правая).

HTML

<div class="text_container_l">
<div class="text_container_r">
<div class="text_l">
тут текст длиннее
</div>
<div class="text_r">
или тут, неважно
</div>
</div>
</div>

CSS «резиновый»

.text_container_l {
width: 50%;
float:left;
}
.text_container_r {
width: 100%;
float:left;
margin:0 0 0 100%;
}
.text_l {
float:left;
width:100%;
margin:0 0 0 -100%;
}
.text_r {
float:left;
}

CSS «фиксированной ширины»

.text_container_l {
width: 400px;
float:left;
}
.text_container_r {
width: 200px;
float:left;
margin:0 0 0 400px;
}
.text_l {
float:left;
width:400px;
margin:0 0 0 -400px;
}
.text_r {
float:left;
}

Описание

Как видите код гораздо проще и понятнее.
В моем случае «резиновой» верстки везде используются проценты и это немного все усложняет, но решение так же подходит и для фиксированной ширины.

В «резиновом» примере предоставлен макет из двух колонок шириной по 50% от ширины контейнера. Обратите внимание, что колонки обернуты двумя <div>-ами, которые будут наследовать высоту вложенных колонок и каждый будет выводить свое фоновое изображение.

Внешним двум контейнерам просто задаем нужные нам широты для колонок, а второму также добавляем компенсацию отступом, равным размеру первой колонки.
Далее задаем ширину первой колонки и также компенсируем отрицательным отступом, равным ширине первой колонки.
Вторая колонка просто «плывет по течению».

Советы

Растягивающийся фон, который будет всегда одной высоты, необходимо прописывать в контейнеры а не в колонки. Также следует избегать всяческие верхние и нижние отступы для контейнеров, например: padding, margin, border. Поскольку все контейнеры вложены друг в друга, то такие отступы у родителя сдвинут всех детей. Если для колонки нужен border, можно использовать вместо него outline или box-shadow:0 0 0 4px #ccc;. Свойство padding также не рекомендуется применять на саму колонку, так как это может увеличить ее ширину и тогда придется рассчитывать «компенсации» и ширину колонки с его учетом. Проще поместить в колонку еще div и с ним уже творить, что угодно.

Основная сложность с процентами, это рассчитать ширину второй колонки относительно первой. То есть если ширина первой колонки 30%, а вторая должна быть в 2 раза больше, то это будет 200% от ширины первой колонки, если в 2 раза меньше, то это будет 50% — такую ширину и нужно на нее ставить.

Если нужно 3+ столбика то соответственно их нужно обернуть в 3 контейнера, которым задать широты и соответственно скомпенсировать отступами.

Автор: JetShark

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js