В сегодняшней статье я хочу рассказать о новом способе создания колонок одинаковой высоты с помощью CSS. Не нужно больше использовать Javascript, чтобы высота колонок стала одинаковой для всех. Суть данного метода заключается в использовании нового свойства CSS3, которое дает нам намного больше возможностей, чем просто создание колонок одинаковой высоты. Но в этом уроке мы рассмотрим как легко можно решить эту наболевшую проблему.
Разметка страницы
HTML часть
Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:
1 2 3 4 5 6 7 8 | id = "page" > <div id = "main" > </ div > |
То есть нам необходимо сделать так, чтобы блок Определим flexbox для основного контейнера, в котором находятся два блока: Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара: Пояснения: Наша страница близка к завершению. Но когда блок с основным контентом сужается, то страница становится очень длинной. Поэтому при определенной ширине экрана мы можем сделать так, чтобы сайдбар уходил под блок с основным контентом и удобно просматривался на мобильных устройствах: Здесь приведен код без префиксов для того, чтобы он не занимал много места и не смотрелся громоздко. Вы можете полностью рабочий пример с помощью кнопки в начале статьи. Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11. Из данной статьи вы узнали как сделать колонки одинаковой высоты на CSS. Но это далеко не все возможности этого CSS свойства. Свойство flex позволяет делать блоки резиновыми, выстраивать элементы автоматически в несколько столбцов или строк, занимая всю свободную область, а также многое другое. Но самое основное, и, главное, часто используемое решение при верстке страниц, мы рассмотрели в данной статье. Перевод: Влад Мержевич Одна из немногих вещей, которую не так просто сделать с помощью CSS - это создание колонок одинаковой высоты. Существуют разные подходы, у каждого из них есть свои плюсы и минусы, здесь я хочу показать четыре метода. Задумаемся над тем, что мы подразумеваем под колонками одинаковой высоты. Как правило, мы не хотим, чтобы контент внутри каждой колонки был одинаковой высоты. Если бы это было так, тогда нет никакой проблемы, поскольку высота колонок, естественно, будет такой же. На деле под колонками одинаковой высоты мы имеем в виду колонки, которые выглядят одинаковыми без контента внутри. Мы можем достичь этого добавляя фон позади колонок, чтобы они казались равной высоты. В результате получим фиктивную одинаковую высоту. Мне никогда не хотелось использовать фиктивные колонки. Не потому что это плохой метод, а потому что у меня есть пунктик - никогда не применять изображение для сплошной заливки цветом. Из-за этого я разработал собственный метод получения колонок одинаковой высоты, который за неимением лучшего термина буду называть псевдоколонки. Он работает аналогично методу фиктивных колонок, который предполагает добавление фона к контейнеру. Это не общий подход к колонкам одинаковой высоты, поэтому он имеет ограниченную область применения, но если вы сталкиваетесь с таким случаем, всё это работает легко и просто. Мы используем тот же HTML, что и в методе фиктивных колонок выше.
Основной контент CSS опять же весьма прост. Для разнообразия я выбрал резиновый макет , но вы можете легко всё настроить и для фиксированной ширины.
#container {
background: #555;
overflow: hidden
}
#content {
float:left;
width:75%;
background:#eee;
}
#sidebar {
float:left;
width:25%;
background:#555;
}
Кроме использования % вместо px заметьте, что я задал цвет фона для #content
и #sidebar
. Вам остается только установить его для любой колонки, которая будет выше, но здесь я специально задал цвет для двух колонок. Основное изменение по сравнению с фиктивными колонками - вместо фонового изображения мы устанавливаем цвет фона. В принципе, это то же самое, что показывать цвет фона контейнера сквозь короткую колонку. Ограничение следующее - мы заранее должны знать, какая колонка будет короче и в идеале эта колонка должна быть такой на всех страницах сайта. Звучит, как довольно серьёзное ограничение, но на практике, я считаю, одна из двух колонок обычно короче на большинстве, если не на всех, страницах. На тех страницах, где это не так, для исправления достаточно просто добавить больше или меньше контента. Этот метод далёк от совершенства, но вы удивитесь, насколько часто он может применяться на практике. На этот метод я наткнулся не так давно на Smashing Magazine в статье Тьерри Кобленца, хотя позже нашёл статью Алана Пирса на A List Apart , написанную несколько лет назад об этом же методе. Используются границы и отрицательные отступы, чтобы создать видимость колонок равной высоты. Ничего нового в HTML нет по сравнению с тем, что мы видели выше. В своей статье Тьерри применяет в качестве контейнера body
, но я буду придерживаться использования контейнера div
как делаю это обычно.
Основной контент В CSS начинается самое интересное. Контейнер просто используется для фиксации ширины и выравнивания макета по центру. Интересное происходит с #content
и #sidebar
.
#container {
width:960px;
margin: 0 auto;
}
#content {
float:left;
width:700px;
border-left: 260px solid #555;
}
#sidebar {
float: left;
width:260px;
margin-right: -260px;
position: relative;
}
Все фоновые цвета в этом методе устанавливаются для колонки #content
. Мы задаём фон как обычно, а затем добавляем левую границу равную ширине боковой панели. Цвет границы совпадает с фоном боковой панели. Если мы здесь остановимся, то вы увидите отображаемые колонки, однако наша левая граница выталкивает боковую панель прочь и мы должны вернуть её назад. Вначале дадим боковой панели отрицательный правый margin
равный её ширине (или ширине левой границы контента, они одинаковы). Это вернёт боковую панель туда, куда мы и хотим, но она по-прежнему не видна. Проблема в порядке наложения двух дивов. #content
располагается поверх #sidebar
, так что мы должны переместить #sidebar
на передний план. Сделаем это путём добавления position: relative
для боковой панели и теперь его содержание становится видно. Рекомендую прочесть обе статьи, ссылки на которые я привёл выше, поскольку они предлагают более детальную информацию, чем я здесь. Обе статьи содержат код для использования этого метода с третьей колонкой, а статья Тьерри рассказывает о создании границ между колонками. Последний метод создал Мэтью Джеймс Тейлор . Из всех методов представленных здесь, на этот раз он будет работать в самых разных случаях использования. Я оставил его на конец, так как метод немного сложный и вам, возможно, придётся прочитать несколько раз для понимания как он работает. HTML похож на то, что мы видели выше, хотя вы заметите дополнительный контейнер div.
Основной контент Как и в других методах, мы будем использовать эти контейнеры для установки фоновых цветов, которые появятся, словно они принадлежат нашим колонкам. В CSS происходит несколько больше, чем мы видели до этого момента. Для #sidebar
и #content
задаётся float
со значением left
и устанавливается ширина, всё остальное помимо этого является новым. Ключом этого метода выступает идея, что плавающий контейнер всегда имеет ту же высоту, что его содержимое. Размещая наши колонки внутри плавающих контейнеров, мы обеспечиваем, что контейнеры будут равны высоте самой длинной колонки.
#container-outer {
float:left;
overflow: hidden;
background: #eee;
}
#container-inner {
float:left;
background: #555;
position: relative;
right:75%;
}
#sidebar {
float: left;
width: 25%;
position: relative;
left: 75%;
}
#content {
float: left;
width: 75%;
position: relative;
left: 75%;
}
Первый шаг - добавить float
к колонкам и контейнерам. Я применяю значение left
, но направление в данном случае не важно. Используйте направление необходимое для вашего макета. Следующим шагом является установка фонов для двух контейнеров div
. Я ставлю фон для #container-inner
чтобы получить желаемое для боковой панели и фон для #container-outer
чтобы получить желаемое для основного контента. Если мы остановимся здесь, то увидим фон только для вложенного div
, поскольку он по порядку наложения выше, чем внешний div
. Нам нужно немного позиционирования дабы сдвинуть внутренний div
так, чтобы он показывался только там, где мы хотим отображать боковую панель. Это позволит фону у внешнего div
проступать сквозь него там, где мы хотим показать колонку с контентом.
#container-inner {
position: relative;
right: 75%;
}
Позиционируем внутреннюю колонку и устанавливаем значение right
на 75%, оно такое же, как ширина колонки с контентом. Фоны на месте, но содержимое обоих колонок также сдвигается на 75% влево. Нам нужно сдвинуть их на место.
#sidebar {
position: relative;
left:75%;
}
#content {
position: relative;
left:75%;
}
Мы снова применяем относительное позиционирование и поскольку содержимое обоих колонок сместилось на 75% влево, нам надо сдвинуть это обратно на 75% вправо. Сделаем это установкой значения left
в 75%. Теперь всё вернулось назад, где и должно быть. В целом это наиболее надёжный метод и он гарантированно работает в любой ситуации. Я призываю вас поиграть с этим для настоящего понимания и прочитать статью Мэтью несколько раз. В статье Мэтью идёт макет из трёх колонок и у него также есть демонстрация для четырёх и пяти колонок. Я решил показать макет из двух колонок в надежде что это сделает идею проще для понимания. Это ни в коем случае не единственные методы создания колонок одинаковой высоты. Крис Койер некоторое время назад поделился несколькими другими методами на CSS Tricks , которые вы можете предпочесть представленным здесь. Есть также много других методов, которые можно найти немного поискав. Думаю, что данная статья и статья Криса охватывает большинство из наиболее распространённых методов. Колонки одинаковой высоты являются желательной чертой дизайна, но их не всегда легко сделать с помощью CSS-макетов . В идеале мы должны были бы использовать что-то вроде height: 100% и на этом всё, но сейчас мы можем применять любой из методов, упомянутых выше. просты в настройке, но нужен дополнительный HTTP-запрос для изображения, а любое изменение макета требует новой картинки. ещё проще, но имеют ограниченное применение для случаев, когда относительная высота обоих колонок известна и постоянна на страницах. сравнительно просты в работе, не требуют предвидения о высоте колонок и прекрасно адаптируются к нескольким колонкам. Только нужно чтобы одна колонка была фиксированной ширины. работает в большинстве случаев. Не нужно предварительно знать о высоте колонок и можно работать с любым желаемым числом колонок. Этот метод немного сложнее других. Со временем я ожидаю более простого стандартного решения, но пока этих четырёх методов должно быть достаточно для вашего проекта. Насколько часто вы делаете дизайн макета с колонками одинаковой высоты? Какой метод создания колонок вы при этом используете? Сделать блоки одинаковой высоты, находящиеся в одной строке. Высота блоков зависит от содержимого. Для решения этой задачи можно воспользоваться одним из . Но тут рассмотрим еще один вариант, который в некоторых случаях удобнее, чем остальные. Каждая строка будет обернута контейнером. Этот контейнер по высоте будет равен высоте самого высокого блока в строке (используем особенность растягиваться по высоте с учетом содержимого.). Каждый блок в строке будет иметь дополнительный элемент для оформления своего родителя. Этот дополнительный элемент будет иметь ширину равную родителю, высоту 100% и абсолютное позиционирование. Чтобы высота была равна самому высокому блоку в строке, позиционируем декоративные элементы относительно блока-строки. Для более чистого и семантического кода, в качестве декоративных элементов использую псевдо элементы. Если объяснения не очень понятны, то пример кода должен все прояснить: Row {
position: relative; /* родитель растягивается по высоте согласно самому высокому дочернему блоку. позиционировать рамки нужно относительно его */
width: 600px;
margin-top: 20px;
float: left;
}
.item {
float: left; /* сделал флоатами чтобы меньше проблем было с позиционированием рамок */
width: 150px;
padding: 5px;
margin-left: 20px;
}
.item:after {
content: "";
display: block;
width: 160px; /* ширина рамки равна ширине блока-колонки */
height: 100%; /* высота = высоте родителя = высоте самого высокого блока-колонки */
border: 1px solid #0000FF; /* тут может быть любой декор для колонок */
-webkit-box-shadow: 0 0 5px #0000FF;
-moz-box-shadow: 0 0 5px #0000FF;
box-shadow: 0 0 5px #0000FF;
position: absolute;
top: 0;
left: 20px; /* учитываем отступ слева элемента.item */
z-index: -1; /* чтобы был доступен контент элемента.item */
}
/* позиционируем остальные рамки с учетом размеров колонок и отступов между ними */
.item+.item:after {
left: 200px;
}
.item+.item+.item:after {
left: 380px;
} Для IE7-8 подключаем дополнительные стили: Item {
z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", " На этой странице описаны примеры, позволяющие сделать колонки одинаковой высоты
в макетах с блочной версткой. Для многих начинающих верстальщиков это является определенной проблемой, ведь если в колонках макета высота не указана явно, то они вытягиваются ровно настолько, чтобы вместить свое содержимое. Соответственно получается, что вместо одинаковой высоты, каждая колонка в макете имеет свою, что выглядит не очень красиво. Для большей наглядности, во всех примерах используются макеты с прижатым футером
. Поэтому обращаю ваше внимание на то, что некоторые блоки или свойства CSS, которые участвуют в создании колонок одинаковой высоты, уже изначально присутствуют в макетах. То есть в итоге они выполняют двойные функции - и футер к низу прижимают и колонки тянуть. Однако для большего удобства только те свойства, которые тянут колонки, будут снабжаться CSS-комментариями
, причем неважно используются ли они еще для каких-то целей или нет. Этот пример построен на принципе дополнительных псевдоколонок и абсолютного позиционирования. Для этого создается несколько блоков (по количеству колонок), которые растягиваются во всю высоту страницы и подкладываются под настоящие колонки. Для того, чтобы появился эффект колонок одинаковой высоты, этим псевдоколонкам задается необходимый фоновый цвет. Так как в Internet Explorer 6 возникают проблемы с этим способом создания колонок одинаковой высоты, то для него было использовано несколько хаков
: Данный пример самый простой в реализации и заключается в том, что создается небольшое «горизонтальное» изображение, состоящее из нескольких цветов (по количеству колонок), которое затем «размножается» по вертикали, имитируя колонки. К сожалению, способ подходит только для фиксированных макетов, к тому же не стоит забывать, что в браузере с отключенными картинками никаких колонок не будет.
Фоновое изображение, которое использовалось в примере можно увидеть . Именно с помощью него была создана видимость колонок одинаковой высоты. В этом примере используется довольно необычная техника. Сначала всем колонкам задаются очень большие нижние отступы, из-за которых они растягиваются, а потом такие же по размеру, но отрицательные по значению нижние поля. В конце все, что является «лишним» - просто обрезается.
Этот метод кроссбраузерный и его понимают все, включая Internet Explorer 6. А вот совместно со способом, которым прижимался футер, он отказывается корректно работать. Я не стал придумывать очередные «костыли» для этого старичка, а наоборот убрал пару свойств, помогающих ему прижать футер. Поэтому при добавлении в колонки содержимого - в IE6 все тянется, как положено. Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто. Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту. Но в блочной верстке не все так просто. HTML код:
Leftsidebar { Content { Right { Clearer { Container { Leftsidebar { Content { Rightsidebar {Колонки одинаковой высоты
CSS часть
Вывод
HTML
CSS
Плюсы
Минусы
HTML
CSS
Плюсы
Минусы
HTML
CSS
Плюсы
Минусы
Дополнительные ресурсы
Резюме
Решение
Колонки одинаковой высоты с помощью позиционирования
Описание примера
Колонки одинаковой высоты с помощью фонового изображения
Описание примера
Колонки одинаковой высоты с помощью полей и отступов
Описание примера
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.Способ 1. Использование свойства display: table
Для реализации макета используется список (ul) или блок div с вложенными в него блоками для строки и каждой из колонок. Обрамляющему блоку div присваивается значение display: table , а каждому вложенному блоку-колонке значение display: table-cell .
Рассмотрим пример со списком.
HTML код:
CSS:
.base {
/*make it 100% width and a minimum of 1000px width*/
width: auto;
margin-left: 0px;
margin-right: 0px;
min-width: 1000px;
padding: 0px;
display:table;
}
.base-row {
Display: table-row;
}
.base li {
display: table-cell;
width: 33%;
}
.cell1 {
background-color: #f00;
}
.cell2 {
background-color: #0f0;
}
.cell3 {
background-color: #00f;
}
Преимущества:
Это наиболее простой и легкий способ создания колонок одинаковой высоты, в отличие от других методов.
Внешний отступ (margin , как cellspacing для таблиц) равный для всех колонок создать не получится, однако, его можно заменить границей белого цвета (или цвета фона колонки) с соотвествующей шириной для иммитации отступа.Недостатки:
Этот метод не работает в браузерах IE7 и ниже. Пройдет немало времени (когда IE7 станет новым IE6), прежде чем мы сможем без опаски использовать этот метод.Способ 2: Использование JavaScript
Этот метод основан на использовании небольшого JS кода (JQuery), который “расставляет” нужную высоту каждой колонке на основе высоты наиболее длинной из них.
HTML код:
CSS:
.container {
Width: 900px;
Margin-left: auto;
Margin-right: auto;
}
.leftsidebar {
Float: left;
Width: 33%;
}
.content {
Float: left;
Width: 33%;
}
.rightsidebar {
Float: left;
Width: 33%;
}
JavaScript (jQuery):
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});
Вы можете положить JS код в отдельный файл и вызвать его непосредственно в HTML коде. В этом случае, инициализация JQuery должна быть по коду расположена выше.
Код, который вам нужно изменить – это название класса блока, который создает колонки. В данном примере это класс container:
Вы можете изменить название класса блока с колонками или, даже, добавить класс к каждому блоку-колонке и использовать их раздельно, для удобства.Преимущества:
Главное преимущество метода – он работает во всех браузерах и вам не нужно напрягаться с CSS кодом для выравнивания высоты.Недостатки:
Если JavaScript будет отключен, соотвественно, колонки не будут равной высоты. Но, как правило, это очень редкий случай, т.к. большинство современных сайтов требуют включения JS.Способ 3: искусственные колонки
Этот метод придуман одним из первых для реализации колонок одинаковой высоты. Суть его в том, что обрамляющему блоку присваивается фон, иммитирующий колонки (см. рис. ниже). Они просто накладываются на этот фон. Эффект равной высоты создается за счет повторяющегося фона.
CSS:
.container {
background-image: tile.png;
background-repeat: repeat-y;
width: 900px;
margin-left: auto;
margin-right: auto;
float: left;
width: 200px;
}
float: left;
width: 400px;
}
float:left;
width: 300px;
}
clear: both;
}
Преимущества:
Очень простая реализация.Недостатки:
Этот метод можно использовать только для макетов/колонок фиксированной ширины.Способ 4: Использование раздельных блоков с фоном
Этот способ основан на использовании раздельных блоков div, каждый из которых имеет свой фон и принимает значение высоты элемента, который он включает.
HTML код:
CSS:
.rightback {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px; /* width of right sidebar */
}
.leftback {
width: 100%;
position:relative;
right: 400px; /* width of the content area */
float:left;
background-color: #f00;
}
width: 900px;
margin-left: auto;
margin-right:auto;
}
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}
Выглядит не просто, не так ли? Главное уяснить 5 основных моментов:
.leftback соотвествует.leftsidebar,
.contentback – .content
и.rightback – .rightsidebar.
Пунктирная линия показывает видимую область колонок (блок.rightback обрезан с помощью overflow: hidden).
На картинке ниже черные линии, расположенные ниже красной – это контент элементов
Все 3 элемента имееют смещение слева от C, с помощью relative position.
C = B+G
Этот метод подробно описывается в
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows