Есть много способов сделать колонки одинаковой высоты, но самый удобный для меня – с помощью js
// Make all the columns of the same height function setEqualHeight(columns){ var tallestcolumn = 0; columns.each( function(){ currentHeight = $(this).height(); if(currentHeight > tallestcolumn){ tallestcolumn = currentHeight; } }); columns.height(tallestcolumn); } setEqualHeight($(".column"));
Высота задается для блоков .column
внутри родителя с классом .columns-wrap
(вы можете использовать другие классы и родителя). Можно использовать даже несколько таких блоков с колонками, копируя и изменяя только последнюю строку – вызов функции со своими параметрами.
В моем примере для такой структуры HTML (у вас он может быть любой другой, с другими классами или другим количеством колонок):
<div class="columns-wrap"> <div class="column">...</div> <div class="column">...</div> <div class="column">...</div> <div class="column">...</div> </div>
Для моего примера прописаны такие стили (стили так же не являются обязательными, дайте волю фантазии):
.columns-wrap { font-size: 0; } .column { box-sizing: border-box; padding: 20px; font-size: 16px; display: inline-block; vertical-align: top; width: 24%; margin: 0.5%; background-color: #ddd; } .columns-wrap div p { margin: 0; padding: 10px; background-color: #fefefe; } @media only screen and (max-width: 768px) { .column { width: 49%; } }
В чем минус этого решения – что высота блока рассчитывается при загрузке страницы, и поэтому при изменении ширины экрана, нужно обновить страницу, чтобы высота блоков просчиталась по новой. То есть, это проблема только при тестировании адаптивности, а на пользовательских экранах при статической одинаковой ширине окна проблем возникнуть не должно.
Примитивный пример (при включении вкладок HTML, SASS или JS нажмите в нижнем правом углу кнопку RERUN):
See the Pen Columns Same Height by Denis (@deniscreative) on CodePen.0