Колонки одинаковой высоты. Колонки одинаковой высоты на CSS
Как добиться одинаковой высоты колонок при div верстке? На текущий момент я знаю только три способа. Перечислю их в порядке полезности и сложности, те что выше в списке боллее простые для понимания, а те что ниже наиболее функциональные:
Изменение display
Делать огромные margin и padding плюс overflow:hidden
Вложенные колонки
Есть еще вариант с использованием javascript, но выравнивать колонки javascript’ом не наш метод. Если вы знаете способы которые принципиально отличаются от уже названных то пишите в комменты, я их добавлю с указанием ссылки на автора. Теперь подробнее про перечисленные мной способы.
Это самый простой способ выравнивания колонок из всех. В то же время он вообще не работает в Internet Explorer ниже и включительно 7 версии. Суть метода:
Делаем div в котором будут размещаться три наши колонки.
Присваиваем родительскому диву display:table;
Присваиваем дочерним дивам display:table-cell;
Все. Довольно просто, не правда ли?
При этом отдельный див для табличного ряда (
) можно вообще не использовать. Я привел его для большей наглядности, но в реальной верстке его можно опустить.
2. Использование margin, padding + overflow:hidden
Способ уже немного посложнее, но тоже ничего сверхумного. Радует то, что способ работает во всех браузерах. Суть метода:
Делаем див в котором будем размещать все наши колонки
Создаем внутри этого дива еще три дива которые собственно и будут теми самыми колонками.
Выравниваем колонки по горизонтали с помощью float:left;
Присваиваем всем колонкам margin-bottom:-32000px; padding-bottom:32000px;
Присваиваем overflow:hidden для родительского дива.
Если непонтяно что мы тут сделали, то объясню подробнее.
Что делает свойство margin-bottom:-32000px?
Оно растягивает колонку вниз на 32000px.
Что делает свойство padding-bottom:32000px?
Оно делает отступ от нижнего края блока до контента в 32000px.
Что делает свойство overflow:hidden у родительского дива?
Оно скрывает ту часть блока в которой нет контента.
Если просуммировать то что я написал выше, то получается, что мы растянули пустое пространство снизу каждой из колонок, и обрезаем его по высоте той колонки в которой больше всего контента. По факту пустое пространство тянется еще очень долго вниз, но пользователь его не видит за счет overflow:hidden.
Для большей ясности советую изучить пример в котором все это уже работает:
Этот способ самый сложный для понимания из всех перечисленных, но это не делает его сложным вообще. За несколько часов плотного изучения статьи и самостоятельных экспериментов он будет полностью понятен. Он самый универсальный, поэтому очень советую его изучить. Итак, как это понятно из названия мы будем вкладывать колонки друг в друга. Здесь уже не хватит простого перечисления шагов в столбик, поэтому каждый из шагов я распишу немного подробнее чем в предыдущих примерах.
Первый шаг. Плацдарм
Создадим родительский див в котором будем располагать все наши колонки
Второй шаг. Создаем оформительские дивы
В родительском диве как матрешки вложим друг в друга еще три дива. Каждый вложенный див будет в последующем отвечать за оформление
отдельной колонки, например, именно к этому диву надо будет применять скругление уголков).
Третий шаг. Создаем дивы с контентом
В последнем из трех вложенных дивов создадим еще три дива, но уже параллельно. Последние три дива не надо вкладывать друг в друга. Эти параллельные дивы будут отвечать за контент
каждой из колонок. В них будет расположен текст и любой другой html.
Четвертый шаг. Определяемся с шириной оформительских колонок
Ширина всей страницы (ширина плацдарма) - 100%. Ширина левой колонки 20%. Выставим для левого оформительского дива ширину 20%. Пока все просто.
Ширина центральной колонки 60% от ширины страницы. Так как центральная колонка вложена в левую, то ее ширина будет рассчитываться относительно левой колонки(родителя). Центральная колонка в три раза шире чем левая, то есть нужно выставить ширину для центральной колонки в 300%.
Ширина правой колонки 20% от ширины страницы. Так как правая колонка вложена в центральную, то ее ширина так же будет рассчитываться относительно родителя и будет в 3 раза меньше чем ширина центральной, то есть нам нужно выставить ширину правой оформительской колонки в 33,3%.
Пятый шаг. Определяемся с шириной контентных колонок
Все три контентных дива вложены в правую оформительскую колонку. Они вложены параллельно. Чтобы было понятнее можно провести аналогию, три матрешки вложены друг в друга и в последней матрешке лежат три кубика. Матрешки это вложенные друг в друга оформительские колонки, а кубики это дивы с контентом.
Ширина правой колонки 20% от ширины страницы. Мы будем рассчитывать все размера контентных дивов относительно этой величины.
Ширина левой контентной колонки - 100% от родителя (20% от страницы)
Ширина центральнойконтентной колонки - 300% от родителя (60% от страницы)
Ширина правой контентной колонки - 100% от родителя (20% от страницы)
Шестой шаг. Двигаем оформительские колонки
Нам нужно сделать так, чтобы каждая из оформительских колонок начиналась там, где заканчивается предыдущая колонка. Сделать это довольно просто. Мы просто присвоим центральной и правой колонкам position:relative и сдвинем их вправо на 100% - left:100%.
Почему именно 100%? Потому что нам надо сдвинуть колонку на всю ширину родительского блока.
Седьмой шаг. Двигаем контентные колонки
Так как мы сдвинули все оформительские колонки на нужные позиции, то все контентные дивы находятся в правой колонке. То есть весь контент оказался в правой части сайта, в правой колонке. Весь контент мы будем двигать из правой части влево.
Для начала выровняем колонки по вертикали с помощью float:left;
Теперь присвоим левому и центральному контентному диву position:relative;, дальше начнем двигать.
Левый контентный див начинается в левом верхнем углу правой
колонки. Чтобы он стал отображаться поверх левой
оформительской колонки нам надо сдвинуть его на 80% влево от ширины страницы. Так как ширина правой колонки 20% от страницы, то мы будем двигать на четыре ширины правой колонки влево или на 300% от ширины правой колонки - left:-400%;
После того как мы сдвинули левый див с контентом его место в правой колонке занял центральный див. Его мы должны сдвинуть только на 60% относительно ширины страницы или на три ширины правой колонки. Сдвинем центральную колонку на 300% влево.
Теперь левый и центральный контентные дивы находятся на своих местах. В правой оформительской колонке остался только правый контентный див. Его мы никуда двигать не будем. Он сам занял нужное положение, так как ему больше никто не мешает.
Еще немного пояснений
Свойства margin-right с отрицательным значением нужны для того, чтобы исключить влияние сдвинутых колонок на поток. То есть все последующие дивы будут выравниваться так, как будто ширина этих колонок с отрицательными margin равна нулю.
Див с классом clear после всех контетных колонок нужен чтобы разорвать поток. После него высота колонок не будет схлапываться.
Всем спасибо за внимаение. На этом я пожалуй закончу статью, непонятные моменты спрашивайте в комментариях.
Реализованный с помощью XHTML и CSS.
Вот так он выглядит в миниатюре:
Особенности:
Оба сайдбара (левая и правая колонки) расположены с правой стороны. Такой тип страницы сейчас очень популярен, он используется на многих блогах.
HTML-код основной колонки расположен до начала кода обоих сайдбаров.
Все 3 колонки визуально растягиваются одинаково по вертикали при увеличении высоты одной из них. При этом не используются изображения.
Универсальность — макет можно использоваться как в случае с фиксированной шириной страницы, так и в случае с «резиновой» шириной. Для этого необходимо применить соответствующие CSS-свойства у 3-х блоков (в примере есть комментарии).
Кроссбраузерность проверена в основных популярных браузерах: Opera 9.23, FireFox 2.0, IE 6, IE 7, Safari/Win.
Валидный XHTML, валидный CSS.
HTML-код
Основа макета выглядит следующим образом:
В связи с тем, что в «резиновом» варианте в Internet Explorer 7 наблюдался небольшой отступ справа от правой колонки, пришлось задействовать дополнительный контейнер #wrpr . При фиксированной верстке данный контейнер не нужен.
CSS-код
Здесь публикую только код, отвечающий за расположение и визуализацию колонок. Все остальное в примере.
#wrapper {
/* для фиксированной ширины */
width: 900px;
margin: 0 auto;
/* для "резиновой" ширины
width: expression((documentElement.clientWidth||document.body.clientWidth)<995?"1000px":"");
min-width: 1000px; */
}
#container {
width: 100%;
background: #D5FFD5; /* фон основной колонки */
}
* html #container {height: 1%;}
#container:after {
/* закрываем плавающие блоки */
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
#sub-container {
float: left;
border-right: 200px solid #BFF2FF; /* фон правого сайдбара */
/* для фиксированной ширины */
width: 700px;
/* для "резиновой" ширины
width: 100%;
margin-left: -200px; */
}
#wrpr {
/* для "резиновой" ширины
margin-left: 200px; */
}
#content {
width: 100%;
float: left;
}
#text {
border-right: 200px solid #FFF2BF; /* фон левого сайдбара */
}
#left {
float: left;
width: 200px;
margin-left: -200px;
background: #FFF2BF; /* фон левого сайдбара */
position: relative;
}
#right {
float: left;
width: 200px;
margin-left: -400px;
background: #BFF2FF; /* фон правого сайдбара */
border-left: 200px solid #FFF2BF; /* фон левого сайдбара */
}
В сегодняшней статье я хочу рассказать о новом способе создания колонок одинаковой высоты с помощью CSS. Не нужно больше использовать Javascript, чтобы высота колонок стала одинаковой для всех. Суть данного метода заключается в использовании нового свойства CSS3, которое дает нам намного больше возможностей, чем просто создание колонок одинаковой высоты. Но в этом уроке мы рассмотрим как легко можно решить эту наболевшую проблему.
Разметка страницы
HTML часть
Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:
1
2
3
4
5
6
7
8
id
=
"page"
>
<div
id
=
"main"
>
</
div
>
То есть нам необходимо сделать так, чтобы блок
с идентификатором main
и блок имели одинаковую высоту, независимо от содержания внутри любого. Но это еще не всё что нужно сделать. На маленьких экранах боковая сторона должна размещаться под блоком с основным содержимым. Это сделаем для удобства просмотра на мобильных устройствах.
Колонки одинаковой высоты
CSS часть
Определим flexbox для основного контейнера, в котором находятся два блока:
Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара:
Пояснения:
flex-grow
— на сколько один отдельный блок может быть больше соседних элементов.
flex-shrink
— определяет возможность сжиматься при необходимости.
Наша страница близка к завершению. Но когда блок с основным контентом сужается, то страница становится очень длинной. Поэтому при определенной ширине экрана мы можем сделать так, чтобы сайдбар уходил под блок с основным контентом и удобно просматривался на мобильных устройствах:
Здесь приведен код без префиксов для того, чтобы он не занимал много места и не смотрелся громоздко. Вы можете полностью рабочий пример с помощью кнопки в начале статьи.
Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11.
Вывод
Из данной статьи вы узнали как сделать колонки одинаковой высоты на CSS. Но это далеко не все возможности этого CSS свойства. Свойство flex позволяет делать блоки резиновыми, выстраивать элементы автоматически в несколько столбцов или строк, занимая всю свободную область, а также многое другое.
Но самое основное, и, главное, часто используемое решение при верстке страниц, мы рассмотрели в данной статье.
Данный небольшой урок по CSS
посвящён тем, кто хочет освоить блочную вёрстку. Сегодня мы разберём такой вопрос, как создание 2-х колонок одинаковой высоты при помощи блоков, а не таблиц.
Это умение применяется практически везде, даже верстая стандартный макет из 2-х колонок, вы столкнётесь с этой проблемой, если вы будете верстать блоками. Так же этот урок направлен на развитие понимания самих принципов блочной вёрстки.
Посмотрите на изображение ниже. При помощи таблиц такой результат достигается автоматически.
Но с блоками всё иначе. Посмотрите на 2 колонки свёрстанных блоками.
Почему же так происходит?
Ответ прост. Дело в том, что таблица это целостный элемент, в котором каждая ячейка зависит от другой, потому она и продолжается дальше. Блок же это отдельный, самостоятельный элемент и он никогда не будет вести себя как таблица!
Так что добиваться такого же результата при помощи блоков, какого добились и от таблиц мы будем, используя маленькие хитрости.
Их много, но сегодня я приведу самую простую и понятную новичку хитрость. Мы просто поместим оба блока в ещё один блок, который их объединит, и этому блоку зададим такой фон, который нам нужен. Так как общий блок будет продолжаться до конца самого большого из блоков, его фон будет распространяться вниз.
Посмотрим, как это выглядит на схеме.
Теперь давайте переходить непосредственно к коду.
Создание колонок одинаковой высоты
Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Теперь разберём что к чему.
Далее создадим фоновое изображение. Ширина главного блока у нас будет равна 700
px.
Следовательно и ширина фонового изображения будет равна 700px. Высоту можно задавать любую в зависимости от того, какой у вас фон.
Я создал такое изображение и назвал его textured.
gif
P.S. от Максима: данный эффект не работает у меня в Firefox.
В сегодняднем уроке мы поговорим о создании сетки с колонками одинаковой высоты в независимости от заполненности онных различным колличеством содержимого. Честно признаюсь это моя самая больная тема, и как перфекциониста она мне просто не даёт спокойно спать по ночам.
Как вы знаете существует много решений подобной задачи, от подгонки контента под определённые параметры длинны, до програмного огрничения символов или подрезки всего, что выходит за грани заданного блока как в ютюбе например. Мне если честно ни один из них не по душе.
Вибирая в качестве иструмента для построения сетки флекс бокс, нам не нужно будет идти на подобные компромисы. FlexBox позволяет сделать гибкую сетку которая сама будет подстраиватся под наше содержимое. Контейнеры Flex вычисляют пространство, доступное внутри сетки, что дает нам большую гибкость с контентом, позволяя сделать, что то похожее на это:
Как это работает?
Я создал контейнер ul с кучей элементов li внутри. Каждый элемент списка содержит некоторые элементы контента, такие как , ,
Всё, что необходимо для создания контейнера flexbox, это display: flex; Я добавил display: flex; На родительский элемент ul (.list), чтобы управлять его дочерними элементами (.list-items).
List {
display: flex;
flex-wrap: wrap;
}
Теперь давайте добавим некоторые медиа-запросы. Мой макет будет начинаться с одной колонки на строку, пока размер экрана не достигнет 40em. Затем разместим по два элемента на строку до тех пор, пока размер экрана не достигнет 60em, затем макет переключится на три колонки в строке.
@media all and (min-width: 40em) {
.list-item {
width: 50%;
}
}
@media all and (min-width: 60em) {
.list-item {
width: 33.33%;
}
}
Я добавил display: flex; К элементам списка, чтобы каждый элемент li растягивался по вертикали. По умолчанию Flex растягивает элементы по вертикали, поэтому колонки могут быть одинаковыми по высоте. Теперь это дает возможность управлять дочерними элементами, позволяя мне закрепить ссылки в нижней части каждого сообщения.