3 - способа сделать html блоки одинаковой высоты, на css и JS

В процессе разработки вебсайта, у разработчика часто возникает задача, сделать на сайте блоки, одинакового размера, и высоты. Это могут быть различные элементы сайта, список товаров, различные карточки другие элементы DOM дерева. Учитывая, что контент, содержание данных блоков, например текста, бывает разного объема, жестко задать высоту, css свойство height: - будет не самым правильным и верным решением.

В для решения данной задачи, существует несколько способов, с использованием как JS так и CSS.

Для примера создадим некоторые блоки с различным объёмом текстового содержания, и зададим некоторые CSS стили.

<div class="blocks__list">
	<div class="block">1. Lorem ipsum ... </div>
	<div class="block">2. Lorem ipsum ... </div>
	<div class="block">3. Lorem ipsum ... </div>
	<div class="block">4. Lorem ipsum ... </div>
	<div class="block">5. Lorem ipsum ... </div>
	<div class="block">6. Lorem ipsum ... </div>
	<div class="block">7. Lorem ipsum ... </div>
	<div class="block">7. Lorem ipsum ... </div>
	<div class="block">9. Lorem ipsum ... </div>
	<div class="block">10. Lorem ipsum ... </div>
</div>

.blocks__list {
    margin-left: -15px;
    margin-right: -15px;
    max-width: 1000px
}
.block {
    background-color: #f8f9fa;
    border: 1px solid #adb5bd;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    margin: 0 15px 20px;
    padding: 10px;
    width: calc(33.33333% - 30px)
}

Так примерно выглядят блоки с различным объемом текста, с использованием css свойств float: left и шириной width.

Блоки одинаковой высоты с помощью CSS.

В настоящее время, с появлением Flexbox – эта задача решается на уровне CSS. Достаточно для блока обертки, в нашем случае с классом .blocks__list – задать CSS свойства:

.blocks__list {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}

И теперь блоки выглядят так – можно сказать, что в данном случае задача решена.

Обратите внимание, на свойство align-items: stretch – именно благодаря данному CSS свойству, блоки растягиваются по высоте и каждый блок в ряду имеет одинаковую высоту. Данное свойство Flex – контейнера является свойством по умолчанию, и указывать его не обязательно.

Нужно сказать, что так же с помощью CSS эту задачу можно выполнить используя CSS Grid. Однако учитывая, что в настоящее поддержка CSS Grid браузерами не достаточно полная, ограничимся Flexbox, поддержка которого, в настоящее время достаточно высока и составляет 98%.

Блоки одинаковой высоты с помощью JS.

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

function someHight(itemClass){
  let item = document.querySelectorAll(itemClass);
  let hightItem = 0;
  for (let i = 0; i < item.length; i++) {
    if (hightItem < item[i].offsetHeight) hightItem = item[i].offsetHeight;
  }
  for (let i = 0; i < item.length; i++) {
    item[i].style.height = hightItem + 'px';
  }
}
someHight('.block');

Принцип работы данной функции достаточно прост:

1. Собираем коллекцию, выбираем все элементы блоков с классом .block
2. В цикле получаем значения высоты всех элементов коллекции, и выбираем высоту самого высокого блока, блока имеющего наибольшую высоту.
3. Опять проходим в цикле, ивсем блокам задаем свойство style.height - полученною высоты самого большого блока.

Теперь, если мы воспользуемся инструментами разработчика в браузере, мы увидим, что все наши блоки получили инлайновое свойство style="height: 180px;", и стали одинаковой высоты, согласно размеру самого высокого блока.

Если необходимо учитывать высоту блоков, и делать блоки согласно самого высокого элемента в ряду, а не самого высокого элемента всей коллекции, воспользуемся другой функцией:

funcItemsHeight()
function funcItemsHeight() {
	let menuItems = document.querySelectorAll('.block');	
	let top = menuItems[0].offsetTop;
	let arrHeight = [];
	let arrItems = [];
	for (let i = 0; i < menuItems.length; i++) {
		menuItems[i].style.height = 'auto';
	}
	for (let i = 0; i < menuItems.length; i++) {
		if (top != menuItems[i].offsetTop) {
			arrHeight.sort(function (a, b) { return b - a });
			for (let j = 0; j < arrItems.length; j++) {
				arrItems[j].style.height = arrHeight[0] + 'px';
			}
			top = menuItems[i].offsetTop;
			arrHeight.length = arrItems.length = 0;
			i = i - 1;
			continue;
		}
		arrHeight[arrHeight.length] = menuItems[i].offsetHeight;
		arrItems[arrItems.length] = menuItems[i];
	}
	arrHeight.sort(function (a, b) { return b - a });
	for (let j = 0; j < arrItems.length; j++) {
		arrItems[j].style.height = arrHeight[0] + 'px';
	}
}
window.onresize = funcItemsHeight

Данная функция немного сложней предыдущей, но принцип её работы примерно такой же. Функция позволяет задавать одинаковую высоту DOM элементам находящимся в одном ряду контейнера. Теперь наши блоки приобрели такую же форму, и выглядят как на рисунке с использованием Flexbox.