Как сделать блоки одинаковой высоты css

Как сделать колонки одинаковой высоты

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

Часть примеров реализуется на чистом CSS, другие используют JavaScript. Вы можете посмотреть каждый пример в редакторе Codepen, кликнув по картинке.

• Содержание:
• 1. Псевдоэлемент и абсолютное позиционирование
• 2. Внутренние и внешние отступы
• 3. По типу таблицы
• 4. Flexbox
• 5. Плагин matchHeight
• 6. jQuery функция css()

1. Псевдоэлемент и абсолютное позиционирование

Суть данного способа следующая: с помощью псевдокласса :after каждой колонке добавляется блок, который залит соответствующим цветом и имеет высоту, равную 100% высоте блока-контейнера. Для блока-контейнера задано свойство overflow: hidden; , которое и обрезает лишнюю высоту.

Шапка страницы
 
 
 
Основной контент
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
  
 

body < margin: 0; background: #FAF2D6; color: #302E2D; >header < padding: 30px 60px; background: #80C8A0; >.container < padding: 30px; position: relative; overflow: hidden; >.main-content < float: left; width: calc(100% - 330px); background: #C9CCC8; >aside < float: right; width: 300px; background: #EC5A45; >.main-content:after, aside:after < content: ""; position: absolute; height: 100%; >.main-content:after < left: 30px; right: 360px; background: #C9CCC8; >aside:after < right: 30px; width: 300px; background: #EC5A45; >.main-content div, aside div < padding: 30px 30px 0 30px; >footer < margin-top: 30px; padding: 30px 60px; background: #80C8A0; >.container:after

В медиазапросе, например, для максимальной ширины 860px отменим обрезку содержимого контейнера, обтекание для колонок и скроем содержимое, добавленное с помощью псевдокласса. Ширину колонок сделаем равную ширине блока-контейнера.

@media (max-width: 860px) < .container < overflow: visible; >.main-content < float: none; margin-bottom: 30px; width: 100%; >aside < float: none; width: 100%; >.main-content div, aside div < padding: 30px; >.main-content:after, aside:after < display: none; >footer < margin-top: 0; >>

2. Внутренние и внешние отступы

Для каждой колонки устанавливаем нижнее поле padding с большим значением. В этом случае фон колонки будет распространяться на всю высоту поля. Далее задаём отрицательное нижнее поле с таким же значением. С его помощью мы уменьшаем высоту колонки до её фактических размеров, не затрагивая фоновую заливку. Свойство overflow: hidden; , заданное для блока-контейнера, обрезает высоту каждой колонки, ориентируясь на самую высокую.

body < margin: 0; background: #FAF2D6; color: #302E2D; >header < padding: 30px 60px; background: #80C8A0; >.container < padding: 30px; overflow: hidden; >.main-content < float: left; width: calc(100% - 330px); background: #C9CCC8; >aside < float: right; width: 300px; background: #EC5A45; >.main-content, aside < padding-bottom: 99999px; margin-bottom: -99999px; >.main-content div, aside div < padding: 30px 30px 0 30px; >footer

В медиазапросе уберём нижние поля и отступы, отменим обрезку содержимого и установим ширину колонок, равную ширине блока-контейнера.

@media (max-width: 860px) < .container < overflow: visible; >.main-content < float: none; width: 100%; margin-bottom: 30px; padding-bottom: 0; >aside < float: none; width: 100%; margin-bottom: 0; padding-bottom: 0; >.main-content div, aside div < padding: 30px; >footer < margin-top: 0; >>

3. По типу таблицы

В данном примере используется особенность html-таблиц, благодаря которой все ячейки одного ряда принимают одинаковую высоту, равную высоте самой высокой ячейки.

Шапка страницы
 
 
 
Основной контент
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
  
 
 

body < margin: 0; background: #FAF2D6; color: #302E2D; >header < padding: 30px 60px; background: #80C8A0; margin-bottom: 30px; >.container < display: table; border-collapse: separate; border-spacing: 30px 0; >.main-content < display: table-row; >.content-wrap < background: #C9CCC8; >aside < width: 300px; background: #EC5A45; >.content-wrap, aside < display: table-cell; padding: 30px; >footer

С помощью медиазапроса сделаем все элементы блочными и установим для боковой колонки ширину 100%.

@media (max-width: 860px) < .container < padding: 0 30px; >.container, .main-content, .content-wrap, aside < display: block; >.content-wrap < margin-bottom: 30px; >aside < width: 100%; box-sizing: border-box; >>

4. Flexbox

В Flexbox-модели каждый дочерний элемент выстраивается в ряд (вдоль главной оси) колонками одинаковой высоты, равной высоте блока-контейнера. Зафиксируем ширину боковой колонки с помощью flex-basis: 300px; и добавим ей значение flex-shrink: 0; , которое предотвратит сужение.

Шапка страницы
 
 
Основной контент
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
  
 

body < margin: 0; background: #FAF2D6; color: #302E2D; >header < padding: 30px 60px; background: #80C8A0; >.container < padding: 30px; >.main-content < margin-right: 30px; background: #C9CCC8; padding: 30px; >aside < background: #EC5A45; padding: 30px; flex-basis: 300px; flex-shrink: 0; >footer

Укажем медиазапрос, в котором флекс-модель будет применяться к элементам для ширины области просмотра от 860px .

@media (min-width: 860px) < .container < display: flex; >> @media (max-width: 859px) < .main-content < margin: 0 0 30px 0; >>

5. Плагин matchHeight

Самый простой способ, который будет работать во всех современных браузерах и IE8+. Скачать плагин можно со страницы разработчика. Эта библиотека позволяет устанавливать одинаковую высоту как в одном ряду, так и во всех рядах одновременно. Для всех колонок задаём одинаковый класс (в данном примере item ), который будет использоваться при активации плагина:

jQuery(document).ready(function($) < $('.item').matchHeight(); >);

Шапка страницы
 
 
Основной контент
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
  
 

* body < margin: 0; background: #FAF2D6; color: #302E2D; >header < padding: 30px 60px; background: #80C8A0; >.container < padding: 30px; >.container:after < content:""; display: table; clear: both; >.item < background: #EC5A45; padding: 30px; >.main < float: left; width: calc(100% - 330px); >aside < width: 300px; float: right; >footer

С помощью медиазапроса отменим обтекание колонок и укажем определение высоты колонок в зависимости от высоты их содержимого.

@media (max-width: 860px) < .item < height: auto !important; float: none; width: 100%; >.main < margin-bottom: 30px; >>

6. jQuery функция css()

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

Шапка страницы
 
 
Основной контент
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
  
 

* body < margin: 0; background: #FAF2D6; color: #302E2D; >header < padding: 30px 60px; background: #80C8A0; >.container < padding: 30px; >.container:after < content:""; display: table; clear: both; >.main < float: left; width: calc(100% - 330px); background: #EC5A45; padding: 30px; >aside < width: 300px; float: right; background: #EC5A45; padding: 30px; >footer

С помощью медиазапроса отменим обтекание колонок и укажем определение минимальной высоты колонок в зависимости от высоты их содержимого.

@media (max-width: 860px) < .main, aside < min-height: auto !important; float: none; width: 100%; >.main < margin-bottom: 30px; >>

jQuery(document).ready(function($) < var content = $('.main'); var sidebar = $('aside'); var getContentHeight = content.outerHeight(); var getSidebarHeight = sidebar.outerHeight(); if (getContentHeight >getSidebarHeight) < sidebar.css('min-height', getContentHeight); >if (getSidebarHeight > getContentHeight) < content.css('min-height', getSidebarHeight); >>);

4 способа как создать блоки одинаковой высоты

Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто. Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту. Но в блочной верстке не все так просто.
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая 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 код:

… Lots Of Content …

…. Lots Of Content …

… Lots Of Content …

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 :

.container > div

Вы можете изменить название класса блока с колонками или, даже, добавить класс к каждому блоку-колонке и использовать их раздельно, для удобства.

Преимущества:

Главное преимущество метода – он работает во всех браузерах и вам не нужно напрягаться с CSS кодом для выравнивания высоты.

Недостатки:

Если JavaScript будет отключен, соотвественно, колонки не будут равной высоты. Но, как правило, это очень редкий случай, т.к. большинство современных сайтов требуют включения JS.

Способ 3: искусственные колонки

Этот метод придуман одним из первых для реализации колонок одинаковой высоты. Суть его в том, что обрамляющему блоку присваивается фон, иммитирующий колонки (см. рис. ниже). Они просто накладываются на этот фон. Эффект равной высоты создается за счет повторяющегося фона.

HTML код:

CSS:

.container background-image: tile.png;
background-repeat: repeat-y;
width: 900px;
margin-left: auto;
margin-right: auto;

.leftsidebar float: left;
width: 200px;
>

.content float: left;
width: 400px;
>

.right float:left;
width: 300px;
>

Преимущества:

Очень простая реализация.

Недостатки:

Этот метод можно использовать только для макетов/колонок фиксированной ширины.

Способ 4: Использование раздельных блоков с фоном

Этот способ основан на использовании раздельных блоков div, каждый из которых имеет свой фон и принимает значение высоты элемента, который он включает.
HTML код:

…Lots Of Content…

…Lots Of Content…

…Lots Of Content…

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;
>

.container width: 900px;
margin-left: auto;
margin-right:auto;
>

.leftsidebar float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
>

.content float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
>

.rightsidebar float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
>

Выглядит не просто, не так ли? Главное уяснить 5 основных моментов:

1. .rightback, .contentback, и.leftback содержат элементы .leftsidebar, .content and .rightsidebar, которые, в свою очередь, содержат текст.
2. Каждый из вложенных блоков отвечает за цвет/фон колонки. В данном примере
   .leftback соотвествует.leftsidebar,
   .contentback – .content
   и .rightback – .rightsidebar.
3. Кроме последнего (отвечающего за правую крайнюю колонку), каждому из блоков задан отступ справа, равный ширине элемента, прилегающего справа, который содержит фон. В данном примере .contentback (отвечающего за фон .content) сдвинут влево на 300px (что является шириной блока .rightsidebar). (см. рис. ниже)
4. Колонки .leftsidebar, .content и .rightsidebar расположены друг за другом с определенной шириной.
5. Они обеспечивают отступ слева равный сумме ширины каждой из колонок, кроме крайней правой. Т.е. они равны=ширина .rightsidebar (300px) и .content (400px) = 700px.( B+G)

На рисунке ниже изображено как располагаются блоки .rightback, .contentback и.leftback. Крайний слева – .rigthback, крайний справа — .leftback.

Пунктирная линия показывает видимую область колонок (блок .rightback обрезан с помощью overflow: hidden).
На картинке ниже черные линии, расположенные ниже красной – это контент элементов .leftsidebar, .content и .rightsidebar, если им задано свойство float:left и соотвествующая ширина.
Все 3 элемента имееют смещение слева от C, с помощью relative position.
C = B+G

Этот метод подробно описывается в этой статье.

Преимущества:

Метод работает во всех браузерах, включая Internet Explorer 6. Для реализации не требуется JavaScript, он полностью основан на CSS и HTML.

Недостатки:

Метод не так прост, как остальные, однако, он позволяет создать столько равных по высоте колонок, сколько требуется.

Вывод

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

Колонки одинаковой высоты на CSS

Речь в данной статьей пойдет о свойстве flex . О нём я уже писал в данной статье — Вторая часть секретных свойств CSS3.

Разметка страницы

HTML часть

Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:

1 2 3 4 5 6 7 8

id="page"> div id="main"> /div>  /aside> /section>

То есть нам необходимо сделать так, чтобы блок с идентификатором main и блок имели одинаковую высоту, независимо от содержания внутри любого. Но это еще не всё что нужно сделать. На маленьких экранах боковая сторона должна размещаться под блоком с основным содержимым. Это сделаем для удобства просмотра на мобильных устройствах.

1 2 3

#page { display:flex; }

1 2 3 4 5 6 7

#page { display:flex; /* Выравнивание по центру */ max-width:1200px; margin:0 auto; }

1 2 3 4 5 6 7 8 9 10

#main { /* Это свойство позволяет данному блоку растягиваться и занимать всё доступное пространство, не затрагивая сайдбар */ flex-grow:1; } aside { /* Здесь задаем ширину сайдбара по умолчанию и не даем ему сужаться*/ flex-shrink:0; width:280px; }

1 2 3 4 5 6 7 8 9 10

@media all and (max-width: 800px) #page { flex-flow:column; } /* Делаем сайдбар на всю ширину экрана */ aside { width:auto; } }

.list < margin: 0 -20px 0 0; overflow: hidden; >.list-item

$(function() < $('.list').each(function()< var column = 0; $(this).children().each(function()< h = $(this).height(); if (h >column) < column = h; >>); $(this).children().height(column); >); >);