Pull to refresh

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

CSSHTML
Sandbox

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


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

Условия:


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

Дизайн:


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

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


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

Решение


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

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

HTML




тут текст длиннее



или тут, неважно





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% от ширины контейнера. Обратите внимание, что колонки обернуты двумя -ами, которые будут наследовать высоту вложенных колонок и каждый будет выводить свое фоновое изображение.

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

Советы


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

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

Если нужно 3+ столбика то соответственно их нужно обернуть в 3 контейнера, которым задать широты и соответственно скомпенсировать отступами.
Tags:html css div верстка высота
Hubs: CSS HTML
Total votes 44: ↑32 and ↓12 +20
Views42.9K

Popular right now

HTML-верстальщик / Middle Frontend разработчик
from 50,000 to 80,000 ₽Девять линийRemote job
WordPress-разработчик / HTML-верстальщик
from 40,000 ₽FLUENTRUSSIAСанкт-ПетербургRemote job
HTML-разработчик
from 50,000 to 100,000 ₽MEIJI MEDIARemote job
Проектировщик интерфейсов - UX/UI designer
from 50,000 to 135,000 ₽Studia-54Санкт-Петербург
Frontend разработчик
from 80,000 to 120,000 ₽3snetRemote job