Равные по высоте колонки с помощью CSS

Равные по высоте колонки с помощью CSS

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

Метод 1. Искусственные колонки

Основная идея этого метода является в том, чтобы создать иллюзию равной высоты, добавляя цвет фона или изображение в контейнер.

Давайте рассмотрим на примере как это работает

<div class="container clearfix">  
    <div class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.   
    Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit,   
    lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non,   
    dictum vitae mi. Donec sed bibendum ante.</div>  
  
    <div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.</div>  
</div>  

Теперь добавим несколько стилей основной и боковой части.

.container {  
    /* none */  
}  
.main, .sidebar {  
    float: left;  
    padding: 20px;  
}  
.main {  
    width: 400px;  
    background-color: LightSlateGrey;  
}  
.sidebar {  
    width: 200px;  
    background-color: Tomato;  
}  

это приведёт нас к такому результату, но как мы видим высота колонок не ровна.

Колонки разной высоты

Давайте попробуем применить технику искусственной колонки, мы просто удаляем цвет фона из боковой панели и добавляем его к .container

.container {  
    background-color: Tomato;  
}  
.main, .sidebar {  
    float: left;  
    padding: 20px;  
}  
.main {  
    width: 400px;  
    background-color: LightSlateGrey;  
}  
.sidebar {  
    width: 200px;  
}  

Теперь боковая панель по высоте ровна боковой.
Колонки одной высоты метод искусственных колонок

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

Метод искусственные  колонки - ошибка

Метод 2. CSS таблицы

Того же результата, мы можем добиться используя табличную технику css.
Эта техника использует CSS свойства для того что бы заставить HTML элемент вести себя как табличка.

Рассмотрим это на примере:

Разметка HTML такая же как в предыдущем примере, только сейчас мы изменим свойства CSS. Для начала основной блок заставить вести себя как таблица. Затем .main и .sidebar вести себя как ячейки этой таблицы. Также мы должны запретить обтекание этих элементов с обеих сторон.

.main, .sidebar {  
    float: none;  
    padding: 20px;  
    vertical-align: top;  
}  
.container {  
    display: table;  
}  
.main {  
    width: 400px;  
    background-color: LightSlateGrey;  
    display: table-cell;  
}  
.sidebar {  
    width: 200px;  
    display: table-cell;  
    background-color: Tomato;  
}  

Колонки одной высоты метод таблиц
Как я и говорил это даст тот же результат что и первый пример, колонки стали одной высоты. В отличии от техники искусственных колонок, этот метод не создаёт иллюзии. Мы просто заставили div вести себя как таблица. Теперь высота колонок будет всегда выравнивается по одной высоте, относительно самой высокой.

comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter