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

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

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

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

HTML:

<header>Шапка страницы</header>
  <div class="container">
    <div class="main-content">
      <div>
        <h1>Основной контент</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </div>
    </div>
    <aside>
      <div>
        <h2>Боковая колонка</h2>
        <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
     </div>          
    </aside>
  </div>
<footer>Подвал страницы</footer>

CSS

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 {
  content: "";
  display: table;
  clear:  both;
}

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

CSS

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

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

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

CSS:

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 {
  margin-top: 30px;
  padding: 30px 60px;
  background: #80C8A0;
}

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

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

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

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

HTML:

<header>Шапка страницы</header>
  <div class="container">
    <div class="main-content">
      <div class="content-wrap">
        <h1>Основной контент</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </div>
      <aside>
        <h2>Боковая колонка</h2>
        <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
      </aside>
    </div>
  </div>
<footer>Подвал страницы</footer>

CSS:

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 {
  margin-top: 30px;
  padding: 30px 60px;
  background: #80C8A0;
}

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

CSS:

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

Flexbox

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

HTML:

<header>Шапка страницы</header>
  <div class="container">
    <div class="main-content">
      <h1>Основной контент</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
    <aside>
      <h2>Боковая колонка</h2>
      <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    </aside>
  </div>
<footer>Подвал страницы</footer>

CSS:

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 {
  padding: 30px 60px;
  background: #80C8A0;
}

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

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

Плагин Jquery matchHeight

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

JavaScript:

jQuery(document).ready(function($) {
  $('.item').matchHeight();
});

HTML:

<header>Шапка страницы</header>
  <div class="container">
    <div class="item main">
      <h1>Основной контент</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
    <aside class="item">
      <h2>Боковая колонка</h2>
      <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    </aside>
  </div>
<footer>Подвал страницы</footer>

CSS:

*{box-sizing:border-box}
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 {
  padding: 30px 60px;
  background: #80C8A0;
}

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

CSS:

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

jQuery функция css()

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

HTML:

<header>Шапка страницы</header>
<div class="container">
  <div class="main">
    <h1>Основной контент</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
  <aside>
    <h2>Боковая колонка</h2>
    <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
  </aside>
</div>
<footer>Подвал страницы</footer>

CSS:

*{box-sizing:border-box}
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 {
  padding: 30px 60px;
  background: #80C8A0;
}

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

CSS:

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

Javascript:

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

Пример для Bootstrap

При использовании сетки разметки Bootstrap часто возникает необходимость сделать блоки, которые находятся рядом, одинаковой высоты. Для решения этой задачи подойдет модуль Flexbox из CSS3

Рассмотрим работу с размером элементов. Для того, чтобы активировать Flexbox назначим свойство display: flex; display: -webkit-flex;. Чтобы уместить элементы на одной строке и сделать их одинаковой высоты, назначим свойство -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;.

CSS:

.row-flex{
display: flex; 
display: -webkit-flex; 
-webkit-flex-wrap: wrap; 
-ms-flex-wrap: wrap; 
flex-wrap: wrap; 
}
.thumb{
border: 1px solid #ccc; 
border-radius: 4px; 
background-color: #ecf3e6; 
height: calc(100% - 15px); 
padding:10px; 
}

HTML:

<div class="row row-flex">
  <div class="col-xs-6">
    <div class="thumb">
      <h4>Блок 1</h4>
      <p>Текст блока 1</p>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="thumb" >
      <h4>Блок 2</h4>
      <p>Текст блока 2.</p>
      <p>Дополнительный текст блока 2, чтобы увеличить высоту блока.</p>
    </div>
  </div>
</div>

Источник материала https://html5book.ru/kak-sdelat-kolonki-odinakovoy-vysoti/

14.04.2020 03:37

679

Администратор

Основное направление деятельноcти –
профессиональная разработка сайтов.

Статьи

Справочник

Инструкции

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

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

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

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

Flexbox

Плагин Jquery matchHeight

jQuery функция css()

Пример для Bootstrap