Đồng bộ chiều cao các div với jquery hỗ trợ thiết kế website

Bạn gặp 1 dãy div với các chiều cao không đồng đều do nội dung khác nhau dẫn đến mất thẩm mỹ cho website. Vậy bạn phải cho chúng cùng một chiều cao.

Mình xin giới thiệu 1 cách sử dụng jquery để giúp các div này thẳng hàng. Tăng thêm thẩm mỹ cho website của bạn trong thiết kế website

 $(document).ready(function () {
        max_height=0;
	$('.row-home-height').each(function(e) {
		  if($(this).height() > max_height){
			  max_height = $(this).height();
		}
	});
	if(max_height > 0)
	{
		$('.row-home-height').css('height', max_height);
	}
});

Kết quả:

Giải thích

max_height=0;
	$('.row-home-height').each(function(e) {
		  if($(this).height() > max_height){
			  max_height = $(this).height();
		}
	});

Với biến max_height = 0 thực hiện vòng lặp đối với class=”row-home-height” trên trang

Nếu chiều cao của div > max_height thì sẽ gán chiều cao của div vào biến max_height.

Vòng lặp thực hiện đến khi lấy được div có height cao nhất gán cho biến max_height

if(max_height > 0)
	{
		$('.row-home-height').css('height', max_height);
	}

Mình check với max_height > 0 Thì sẽ gán cho class row-home-height chiều cao mà đã lấy được ở trên

Như vậy các div đã có cùng chiều cao và thẳng hàng.

Cảm ơn bạn đã quan tâm đến nhóm phát triển chúng tôi. Hi vọng bài viết sẽ có ích cho bạn